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);
      }
    );
  }

Answer 1

您可以使用safe navigation operator ?.。它会在访问变量的属性之前检查是否已定义该变量。

<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>
  ...

Answer 2

将onCallDuties初始化为OnCallDuties: OnCallDuty[] = [];

您得到的是ngFor上的错误，这是因为您的订阅响应是异步的，因此ngFor会尝试在对onCallDuties进行迭代之前对其进行迭代。

使它作为一个空数组开始，以便它可以遍历空（错误将会消失），或者在ngFor的外部元素上添加一个ngIf作为*ngIf="onCallDuties"，这样您就可以等待该值成为在尝试对其进行迭代之前进行定义。

Answer 3

问题很可能是您在从订阅返回之前在模板中引用了变量（当订阅位于ngOnInit（）中时，响应和随后的onCallDuties设置将在此之后）。

一种解决方法是将内容包装在*ngIf="OnCallDuties"中，或使用可选的？。引用变量名称时。