Question

我有一个使用@Input（）id的组件：string [] = [];如果长度等于1，我要检查DOM的变量。

<mat-expansion-panel *ngFor="let id of ids" [expanded]="ids.length === 1">
...
</mat-expansion-panel>

然后，我将来自rest调用的ids.push（id）附加到我的父组件的ids输入中，这可能需要一段时间才能响应。

这使该站点显示出mat-expansion-panel展开了不到一秒钟的时间（取决于响应），如果id超过一个，则再次折叠它。这是不想要的行为。

在获取每个ID之后，我不知道如何立即发送完整列表（不推送到列表中），因为很多嵌套订阅中的所有调用都会调用该调用。

Answer 1

我通过设置一个标志来解决该问题，该标志告诉组件是否所有ID都已完成订阅。

ParentComponent

@Component({
  ...
  template: `
    <child-component [ids]="ids" [idsFinished]="idsCounter === 0">
    </child-component>
  `,
  ...
})
export class ParentComponent implements OnInit {
  ids: string[] = [];
  idsCounter: number;
  ...
  private getIds(): void {
    this.getResourcesService().subscribe(resourcesResult => {
      this.idsCounter = resourcesResult.length;
      resourcesResult.forEach(resource => {
        this.getIdService(resource).subscribe(idResult => {
          this.ids.push(idResult);
          this.idsCounter--;
        });
      });
    });
  }
}

ChildComponent

@Component({
  ...
  template: `
    <mat-expansion-panel *ngFor="let id of ids" [expanded]="ids.length === 1 && idsFinished"> 
      ...
    </mat-expansion-panel>
  `,
  ...
})
export class ChildComponent implements OnInit {
  @Input() ids: string[] = [];
  @Input() idsFinished = false;
}

对@Input（）数组长度进行延迟检查

1 个答案: