Javascript 与服务共享数据

我试图显示每个对应名称的数据（来自json服务器的数据），如firstName、lastName、email等

user.component.html-这是我想要显示相应数据的地方

<div>
  <h2>{{selectedUser.firstName | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedUser.id}}</div>
  <div>
    <label>First name:
      <input [(ngModel)]="selectedUser.firstName" placeholder="First Name" />
    </label>
  </div>
  <div>
    <label>Last name:
      <input [(ngModel)]="selectedUser.lastName" placeholder="Last Name" />
    </label>
  </div>
  <div>
    <label>Email:
      <input [(ngModel)]="selectedUser.email" placeholder="example.com" />
    </label>
  </div>
  <div>
    <label>Start date:
      <input [(ngModel)]="selectedUser.startDate" placeholder="Start date" />
    </label>
  </div>
</div>

home.component.html-这是我显示每个用户名称的地方，当我单击时，我想在用户页面上显示内容

<h2>Users</h2>
<ul class="users">
  <a routerLink="/user"><li *ngFor="let user of users['users']"
    [class.selected]="user === selectedUser"
    (click)="onSelect(user)">
    <span class="badge">{{user.id}}</span> {{user.firstName}} {{user.lastName}}
  </li> </a>
</ul>

这是数据。服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { Observable } from 'rxjs';
import { User } from "./user";

@Injectable({
  providedIn: 'root'
})
export class DataService {

  selectedUser: User;

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]>{
    return this.http.get<User[]>("http://localhost:3000/users");
  }      

  onSelect(user: User): void {
    console.log(user);
    this.selectedUser = user;
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{BehaviorSubject}；
从“rxjs”导入{Observable}；
从“/User”导入{User}；
@注射的({
providedIn:'根'
})
导出类数据服务{
selectedUser：用户；
构造函数（私有http:HttpClient）{}
getUsers（）：可观察{
返回此.http.get（“http://localhost:3000/users");
}      
onSelect（用户：用户）：无效{
console.log（用户）；
this.selectedUser=user；
}
}

当我在主页上显示姓名时，这是有效的。

---

我也在一个页面（home.component）上显示了这些数据，而且效果很好，但现在我必须在另一个页面上显示它们。我曾尝试使用Behavior Subject执行此操作，但遇到了问题。

您可以让

数据服务

将

用户

缓存在

行为主体

中，并且所有组件都绑定到数据服务的

用户$

属性

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { User } from "./user";

@Injectable({
  providedIn: 'root'
})
export class DataService {

  isLoading$ = new BehaviorSubject<boolean>(false);
  users$ = new BehaviorSubject<User[]>(undefined);

  constructor(private http: HttpClient) { }

  loadUsers(): void {
    this.isLoading$.next(true);    

    this.http.get<User[]>("http://localhost:3000/users", { observe: "response" }).subscribe(
      (res: HttpResponse<User[]>) => {
        this.users$.next(res.body);
      },
      (res: HttpErrorResponse) => this.onError(res),
      () => this.isLoading$.next(false)
    );    
  }

  private onError(res: HttpErrorResponse) {
    console.log(res.message);
  }
}

从'@angular/core'导入{Injectable}；
从“rxjs”导入{BehaviorSubject}；
从'@angular/common/http'导入{HttpClient，HttpResponse，HttpErrorResponse}；
从“/User”导入{User}；
@注射的({
providedIn:'根'
})
导出类数据服务{
isLoading$=新行为主体（false）；
用户$=新行为主体（未定义）；
构造函数（私有http:HttpClient）{}
loadUsers（）：void{
此.isLoading$.next（true）；
这是http.get（“http://localhost:3000/users“，{观察：“响应”}。订阅(
（res:HttpResponse）=>{
this.users$.next（res.body）；
},
（res:HttpErrorResponse）=>此.onError（res），
（）=>this.isLoading$.next（false）
);    
}
私有onError（res:HttpErrorResponse）{
console.log（res.message）；
}
}

您错误地访问了

.html

文件中的属性。例如：

<h2>Users</h2>
<ul class="users">
  <a routerLink="/user"><li *ngFor="let user of users['users']"
    [class.selected]="user === selectedUser"
    (click)="onSelect(user)">
    <span class="badge">{{user.id}}</span> {{user.firstName}} {{user.lastName}}
  </li> </a>
</ul>

用户


{{user.id}{{user.firstName}{{user.lastName}}

应该是：

<h2>Users</h2>
<ul class="users">
  <a routerLink="/user"><li *ngFor="let user of users['users']"
    [class.selected]="user === dataService.selectedUser"
    (click)="dataService.onSelect(user)">
    <span class="badge">{{user.id}}</span> {{user.firstName}} {{user.lastName}}
  </li> </a>
</ul>

用户


{{user.id}{{user.firstName}{{user.lastName}}

<h2>Users</h2>
<ul class="users">
  <a routerLink="/user"><li *ngFor="let user of users['users']"
    [class.selected]="user === selectedUser"
    (click)="onSelect(user)">
    <span class="badge">{{user.id}}</span> {{user.firstName}} {{user.lastName}}
  </li> </a>
</ul>

<h2>Users</h2>
<ul class="users">
  <a routerLink="/user"><li *ngFor="let user of users['users']"
    [class.selected]="user === dataService.selectedUser"
    (click)="dataService.onSelect(user)">
    <span class="badge">{{user.id}}</span> {{user.firstName}} {{user.lastName}}
  </li> </a>
</ul>