ошибка TS2339: свойство 'loading' не существует для типа 'DiseaseListComponent'

Question

Итак, у меня возникла следующая проблема:

ERROR in src/app/disease/disease-list/disease-list.component.html:21:53 - error TS2339: Property 'loading' does not exist on type 'DiseaseListComponent'.

21   <mat-card class="error" *ngIf="errorMessage; else loading">
                                                   ~~~~~~~

src/app/disease/disease-list/disease-list.component.ts:10:16
10   templateUrl: './disease-list.component.html',
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component DiseaseListComponent.

Вот мой код:

    <div *ngIf="(diseases$ | async) as diseases; else loadingOrError">
      <div fxLayout="column" fxLayoutGap="2%">
        <app-add-disease (newDisease)="addNewDisease($event)"></app-add-disease>

        <mat-card>
          <mat-form-field>
            <input matInput (keyup)='filterDisease$.next($event.target.value)' type="text" placeholder="filter" />
          </mat-form-field>

        </mat-card>
        <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="0.5%" fxLayoutAlign="start">
          <div class="disease" *ngFor="
        let localDisease of (diseases$ | async | diseaseFilter : filterDiseaseName)" fxFlex="0 0 calc(25%-0.5%)"
            fxFlex.xs="100%">
            <app-disease [disease]="localDisease"></app-disease>
          </div>
        </div>
      </div>
    </div>
    <ng-template #loadingOrError>
      <mat-card class="error" *ngIf="errorMessage; else loading">
        Error loading the disease list: {{ errorMessage }}. <br />
        Please try again later.
        <ng-template #loading>
          <mat-spinner></mat-spinner>
        </ng-template>
      </mat-card>
    </ng-template>

По сути, он не может найти часть #loading, и я не могу понять почему. Я немного нуб, когда дело доходит до angular.

Answer 1

Проблема в том, что <ng-template #loading> определено внутри <mat-card class="error" *ngIf="errorMessage; else loading">, поэтому, когда условие *ngIf ложно, оно не будет существовать в DOM. Вам нужно поставить его на тот же уровень, что и <mat-card class="error" *ngIf="errorMessage; else loading"> или выше

<mat-card class="error" *ngIf="errorMessage; else loading">
  Error loading the disease list: {{ errorMessage }}. <br />
  Please try again later.
</mat-card>
<ng-template #loading>
  <mat-spinner></mat-spinner>
</ng-template>