如何在 Angular 材料表下方显示来自 API 的错误

Question

我面临以下问题。

我想展示适用于整个表格的 API 错误。就我而言，我想显示表没有行的错误。我可以使用 mat-error 显示错误，但是当我填充它时，错误并没有隐藏。我希望在库存控制中显示和隐藏错误（例如：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;
}