如何在模板中使用异步命令显示数据？

Question

我有一个8角的应用程序。我使用async命令将数据从子组件传递到父组件。但是数据是由服务器返回的，但是HTML模板没有显示数据。

这是我的typescript

correspondenceEntries$: Observable<DossierEntry[]>;
  attachmentEntries$: Observable<DossierEntry[]>;

  @Input() allCorrespondence: Array<DossierEntry>;
  @Input() correspondenceEntries: Array<DossierEntry>;
  @Input() attachmentEntries: Array<DossierEntry>;

  message = '';
  emptyMessageCorrespondentie = 'Geen correspondentie.';
  errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;

  showingSingle = false;

  single: DossierEntry;

  constructor(private documentCorrespondeceService: DocumentCorrespondenceService, private authService: AuthService) {}

  ngOnInit() {


    this.authService.loginStatus().subscribe(user => {
      const UUID = user.profile.participant;

      this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
        this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
      }, msg => (this.message = this.emptyMessageCorrespondentie));
    });
  }

  handleCorrespondenceLoad(result: any) {
    if (result.length === 0) {
      this.message = this.emptyMessageCorrespondentie;
      return;
    }
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];

    const groups = _.groupBy(result, 'type');
    console.log(this.correspondenceEntries = groups.correspondence);
    console.log(this.attachmentEntries = groups.attachments);
    this.correspondenceEntries = groups.correspondence;
    this.attachmentEntries = groups.attachments;
  }

下面是HTML模板：

<h2 class="dossier-page-header">Correspondentie</h2>

  <p class="data-entry" *ngIf="!allCorrespondence">{{ message }}</p>


<ng-container *ngIf="(correspondenceEntries$ | async) as correspondenceEntries">
  <app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" ></app-dossier-correspondence-list>
</ng-container>

<ng-container *ngIf="(attachmentEntries$ | async) as attachmentEntries">
  <app-dossier-correspondence-attachments [attachmentEntries] = "attachmentEntries"></app-dossier-correspondence-attachments>
</ng-container>


  <app-dossier-correspondence-item
    [item]="single"
    (goBack)="goBack($event)"
    *ngIf="showingSingle">
  </app-dossier-correspondence-item>

所以当我这么做的时候

console.log(this.correspondenceEntries = groups.correspondence);
    console.log(this.attachmentEntries = groups.attachments);

我看到了数据：

Array(13)
:4200/dossier-dossier-module-ngfactory.js:17533 Array(3)

但它没有显示在视图中。

那么如何改进这个，这样的数据也会在视图中显示出来。

谢谢。

我明白。

但如何做到这一点：

this.attachmentEntries$ =     this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
        this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
      }, msg => (this.message = this.emptyMessageCorrespondentie));
    });

当然，这也是work.So如何使用可观察到的：

correspondenceEntries$: Observable<DossierEntry[]>;
  attachmentEntries$: Observable<DossierEntry[]>;

因为有两个数组。

你的意思是这样：

<app-dossier-correspondence-list *ngFor="let item of correspondenceEntries"  ></app-dossier-correspondence-list>

这是：

ngOnInit() {


    this.authService.loginStatus().subscribe(user => {
      const UUID = user.profile.participant;

      this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result => {
        this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
      }, msg => (this.message = this.emptyMessageCorrespondentie));
    });
  }

但是

子组件已经如下所示：

<div *ngIf="!showingSingle  && correspondenceEntries && correspondenceEntries.length > 0;">
  <div class="main-row main-row-dossier">
    <section class="data-entry">
      <h3 class="dossier-header">Algemeen</h3>
      <table class="dossier-table" *ngIf="correspondenceEntries  else loadingCorrespondenceEntires ">
        <thead class="dossier-tableheader">
          <tr>
            <th class="dossier-tablehead fixed-one-fifth">Datum</th>
            <th class="dossier-tablehead fixed-four-fifths">Onderwerp</th>
          </tr>
        </thead>
        <tbody class="dossier-tablebody">
          <tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)">
            <td>{{ entry.date | date:"dd-MM-y" }}</td>
            <td>{{ entry.name }}</td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</div>

<ng-template #loadingCorrespondenceEntires>
  <div>..Loading </div>
</ng-template>

Answer 1

你正在混合两种方式来订阅一个可观察的。选择一个，不要兼而有之。

解决方案1：

// component
this.myService.getDataFromServer().subscribe(
  result => this.data = result
);

<!-- HTML -->
<div *ngFor="let item of data">
  <span>{{item.label}}</span>
</div>

解决方案2：

// component
this.data$ = this.myService.getDataFromServer()

<!-- HTML -->
<div *ngIf="(data$ | async) as data">
  <span>{{data.label}}</span>
</div>