Как показать ошибку из API ниже Angular Таблица материалов

Question

Я столкнулся со следующей проблемой.

Я хочу представить ошибку от API, которая применяется ко всей таблице. В моем случае я хочу показать ошибку, что в таблице нет строк. Я могу представить ошибку, используя mat-error, однако, когда я ее заполняю, ошибка не скрывается. У меня sh будет ошибка, которая будет отображаться и скрываться, как при управлении запасами (например, mat-input).

Ниже моего html кода.

<mat-form-field color="accent" class="col-lg-4 col-xs-12 col-sm-12">
  <input matInput name="name" ngModel #name="ngModel" placeholder="Name">
  <mat-error *ngIf="name.invalid">{{name.errors.api}}</mat-error>
</mat-form-field>

<input type="hidden" name="converters" [ngModel]="converterItems.data" #converters="ngModel">
<table mat-table [dataSource]="converterItems" name="converters">
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
    </th>
    <td mat-cell *matCellDef="let row">
      <mat-checkbox (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </td>
  </ng-container>
  <ng-container matColumnDef="key">
    <th mat-header-cell *matHeaderCellDef> Key </th>
    <td mat-cell *matCellDef="let element"> {{element.key}} </td>
  </ng-container>
  <ng-container matColumnDef="typeName">
    <th mat-header-cell *matHeaderCellDef> Type name </th>
    <td mat-cell *matCellDef="let element"> {{element.typeName}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumnsConverters"></tr>
  <tr [@rowsAnimation]="" mat-row *matRowDef="let row; columns: displayedColumnsConverters;" (click)="select(row)"
      [ngClass]="{ 'selected': row === selectedRow }"></tr>
</table>
<mat-error *ngIf="converters.invalid" class="errorTextSize">{{converters.errors.api}}</mat-error>

Заранее благодарю за помощь.

Answer 1

Вы можете попробовать следующий код:

this.appService.getService().subcribe(result => {
    // Do something when the service returns successfully
},
error => {
    // Do something when the service returns with an error like below:
    this.converters.invalid=true;
}