CODEWITHSUNDEEP
javascriptangularreact-reduxrxjsobservable
mightycode Newton
mightycode Newton

Reputation: 3949

How to show data with the async command in the template?

I have an Angular 8 application. And I am using the asynccommand for passing data from child to parent component. But the data is returning by the server but is not been displayed by the HTML template.

This is my 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;
  }

And here is the HTML template:


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

So when I do this:

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

I see the data:

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

But it's not displayed in the view.

So how to improve this, that the data will also be showing in the view.

Thank you.

I understand.

But How to do this then:

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

Of course this doenst work.So how to use the Observables:

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

?

Because there are two arrays.

So you mean like this:

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

and this:


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

But the

child component looks already like this:

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

Upvotes: 0

Views: 62

Answers (1)

Random
Random

Reputation: 3236

You are mixing 2 ways to subscribe to an Observable. Choose one, don't do both.

Solution 1:

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

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

Solution 2:

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

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

Upvotes: 1

Related Questions