angular - Angular 7 Typerror：无法读取未定义的属性“userId”

Question

我正在使用 Angular 7 并尝试在表格中显示一些数据。我在控制台中收到此错误：ERROR TypeError: Cannot read property 'userId' of undefined at Object.eval [as updateRenderer] . 如果我使用?运算符，我会得到 NaN 作为我的数据。

我正在注销从服务器接收到的数据，并且我得到了所有这些数据，所以问题应该出在我认为在我的组件 .ts 或 html 代码中的前端。

我的html：

<tr *ngFor="let on-callduty of OnCallDuties">
        <td><button mat-raised-button color="primary" (click)="updateOnCallDuty(on-callduty.id)">
            <mat-icon><i class="material-icons">edit</i>
            </mat-icon>
          </button></td>
        <td><button mat-raised-button color="accent" (click)="deleteOnCallDuty(on-callduty)">
            <mat-icon><i class="material-icons">delete_forever</i>
            </mat-icon>
          </button></td>
        <td>{{on-callduty.userId}}</td>     <--- causes error
        <td>{{on-callduty.typeId}}</td>
        <td>{{on-callduty.dateFrom}}</td>
        <td>{{on-callduty.dateTo}}</td>

我的 ts：

  OnCallDuties: OnCallDuty[];
  onCallDuty: OnCallDuty = new OnCallDuty("", "", "", "");

  constructor(private router: Router,
    private httpClientService: DutyService) { }

  ngOnInit() {
    this.httpClientService.getOnCallDuty().subscribe(
      response => {
        this.OnCallDuties = response;
        console.log(this.OnCallDuties);
      }
    );
  }

标签： angular

Answer 1

您可以使用安全导航运算符?.。它在访问变量的属性之前检查是否定义了变量。

<tr *ngFor="let on-callduty of OnCallDuties">
  <td>
    <button mat-raised-button color="primary" (click)="updateOnCallDuty(on-callduty?.id)">
      <mat-icon><i class="material-icons">edit</i>
      </mat-icon>
    </button>
  </td>
  <td>
    <button mat-raised-button color="accent" (click)="deleteOnCallDuty(on-callduty)">
      <mat-icon><i class="material-icons">delete_forever</i>
      </mat-icon>
    </button>
  </td>
  <td>{{on-callduty?.userId}}</td>
  <td>{{on-callduty?.typeId}}</td>
  <td>{{on-callduty?.dateFrom}}</td>
  <td>{{on-callduty?.dateTo}}</td>
  ...

还要检查对象是否实际包含该userId属性。如果不是，则在使用安全导航运算符时不会呈现。

更新：NaN

局部变量名称中的连字符似乎on-callduty弄乱了指令。将其更改为其他内容（例如。on_callduty）。

<tr *ngFor="let on_callduty of OnCallDuties">
  <td>
    <button mat-raised-button color="primary" (click)="updateOnCallDuty(on_callduty?.id)">
      <mat-icon><i class="material-icons">edit</i>
      </mat-icon>
    </button>
  </td>
  <td>
    <button mat-raised-button color="accent" (click)="deleteOnCallDuty(on_callduty)">
      <mat-icon><i class="material-icons">delete_forever</i>
      </mat-icon>
    </button>
  </td>
  <td>{{on_callduty?.userId}}</td>
  <td>{{on_callduty?.typeId}}</td>
  <td>{{on_callduty?.dateFrom}}</td>
  <td>{{on_callduty?.dateTo}}</td>
  ...