与服务共享数据

Question

我正在尝试显示每个相应名称的数据（来自 json-server 的数据），例如名字、姓氏、电子邮件等。

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>

user.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { User } from '../user';
import { DataService } from '../data.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  users: any

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getUsers()
      .subscribe(data => this.users = data);
  }
}

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>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Router } from '@angular/router';
import { User } from '../user';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public users = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getUsers()
      .subscribe(data => this.users = data);

  }
}

这里是 data.service

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;
  }
}

当我在主页上显示名称时，它就起作用了。 我还在单个页面（home.component）上显示了这种数据并且它有效，但现在我必须在另一个页面上显示它。我尝试使用 BehaviourSubject 来执行此操作，但我遇到了困难。

Answer 1

您在.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>

应该是：

<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>

Answer 2

您可以让DataService 为您在BehaviorSubject 中缓存users，并且所有组件都绑定到DataService 的users$ 属性。

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);
  }
}