Angular：异步获取数据；我不应该强制更改检测

Question

我经常遇到这个问题。尝试获取用户列表（来自数据库）并将其显示在

用户-admin.component.html:

<div class="col-md-2 offset-1">
    <select size=20 [ngStyle]="{'width': '200px'}"> 
      <option *ngFor="let name of userNames">{{name}}</option>
    </select>
</div>

用户-admin.component.ts

  userNames: string[] = [];

  constructor(private fb: FormBuilder,
              private authService: AuthService
              ) { }

  ngOnInit() {
    this.authService.getAllUserNames(this.userNames);

getAllUserNames 是服务中的一个函数：authService。

  getAllUserNames(userNames: string[]) {
    this.http.get(this.baseUrl + 'usernames').subscribe( (results: string[]) => {
      userNames = results;
    });
  }

当页面启动 (ngOnInit) 并调用此函数时，它正确 returns 'userNames' 包含两个用户名的列表。

我只能假定 user-admin.component userNames 具有相同的列表。（我测试了 html 以确保它会列出名称（如果它们在列表中））。

解决方案？我假设我必须强制执行 ChangeDetection，这似乎真的没有必要？

OR this.userNames 需要是一个参考变量。我认为它已经是（字符串类型列表）。我尝试创建一个仅包含 this.userName 作为唯一内容的 class，然后传递一个 'new AllUsers' class，但 AllUsers 中的列表也没有显示用户名。

想法？提前致谢。瑜珈

Answer 1

您不需要订阅服务，而是订阅组件 class。像这样，您不需要强制更改检测。只要你更新 userNames(component class 属性) 它就会自动渲染。

user-admin.component.ts

  userNames: string[] = [];

  constructor(private fb: FormBuilder,
              private authService: AuthService
              ) { }

  ngOnInit() {
    this.authService.getAllUserNames().subscribe( (results: string[]) => {
      userNames = results;
    });
}

  getAllUserNames(userNames: string[]) {
    this.http.get(this.baseUrl + 'usernames');
  }

Answer 2

您需要从服务中的 HTTP 请求 return observable returned 并订阅它的组件。尝试以下

用户-admin.component.ts

userNames: string[] = [];

constructor(private fb: FormBuilder, private authService: AuthService) { }

ngOnInit() {
  this.authService.getAllUserNames().subscribe(
    response => { this.userNames = response },
    error => { // handle error }
  );
}

authService

getAllUserNames(): Obserable<any> {
  return this.http.get(this.baseUrl + 'usernames');
}

另一种方法是使用 async 管道，您不必在组件中订阅。但这在这种情况下并没有太大区别，因为 async 通常有助于处理内存泄漏错误。而这里 HTTP 客户端会处理内存泄漏问题，因此我们不必在组件中手动取消订阅。

但是，如果您使用的是自定义的 Observable 并希望在组件中订阅它，建议在 OnDestroy 挂钩中取消订阅。

import { Component, OnInit, OnDestroy } from '@angular/core';

export class AppComponent implements OnInit, OnDestroy {
  private subscription: any;

  ngOnInit() {
    this.subscription = this.service.getObservable().subscribe(
      value => { },
      error => { }
    );
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Angular：异步获取数据；我不应该强制更改检测

Angular: getting data from async; I should not have to force change detection

pass-by-reference

angular

angular-changedetection