angular - 错误 TS2339 : Property 'loading' does not exist on type '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条件为 false 时它不会存在于 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>