如何使用 Angular 9 将异步数据传递给 child 组件

Question

我正在使用 HttpClient 模块进行服务器调用，并以 Observable 的形式取回响应。下面是异步获取数据的代码

let dataArr = [];
let dataObject = {};
let datafinalObject = {};

this.http.get('http://localhost:8080/api/rooms').subscribe(data => {
    if(data.length > 0) {
        dataArr.push(data);
    }

    for(const obj of data) {
        dataObject = data;
    }

    datafinalObject = dataObject;
});

在我的 HTML 文件中，我将 datafinalObject 传递给 child 组件。像这样

<child-component [datafinalObject]="datafinalObject"></child-component>

child-component.ts 文件

export class ChildComponent {
    ngOnChanges(changes: SimpleChanges) {
        if(changes.datafinalObject && changes.datafinalObject.currentValue) {
            // do some operations
        }
    }
}

使用 subscribe() 方法，我从服务器异步获取数据。只有第一个结果 object 被传递到 datafinalObject 而不是整个结果集。如何确保整个结果集通过 datafinalObject 传递给 child 组件？

Answer 1

一种方法是等待所有项目加载（使用布尔标志），一旦所有项目都加载完毕，您就可以将该数据传递给子组件。

您可以直接使用dataFinalObject（除非您必须先更改数据）。我建议使用界面（用于房间）

我正在本地创建一个 observable，但您可以用 api 调用

替换它

stackblitz

  datafinalObject = {};
  itemsLoaded = false;

  constructor(private http: HttpClient) {}

  ngOnInit(){
    this.getRooms();
  }

  getRooms() {
    this.dataIs.subscribe(data => {
      if (data) {
        this.datafinalObject = data;
        this.itemsLoaded = true;
      }
    });
  }

子组件可能如下所示

<hello *ngIf=itemsLoaded [datafinalObject]="datafinalObject"></hello>

Answer 2

查看设计模式 behaviorsubject async pipe，这是将任何数据传递给可随时更新的子组件的可靠方法。这允许 http calls/services 管理数据和任意数量的组件以根据需要更新以简单地显示数据。

在下面的代码中，您可以看到我在 *ngIf 上的模板中使用了 async 管道，并将其分配给一个变量，然后将其传递给子组件的输入.这提供了一个很好的干净语法，如果值为 null 并且只有 display/pass 最终对象在它有一个值时不显示子对象。

let dataArr = [];
let dataObject = {};
let datafinalObject = {};
public datafinalObject = new BehaviorSubject(null);
this.http.get('http://localhost:8080/api/rooms').subscribe(data => {
    if(data.length > 0) {
        dataArr.push(data);
    }
    for(const obj of data) {
        dataObject = data;
    }
    this.datafinalObject.next(dataObject);
});

然后在您的组件中使用

<child-component *ngIf="datafinalObject | async as finalObject" [datafinalObject]="finalObject"></child-component>

如何使用 Angular 9 将异步数据传递给 child 组件

How to pass asynchronous data to the child component using Angular 9

asynchronous

httpclient

observable

rxjs

angular