Question

我有一个Angular组件，其中包含一个带有用户的表，它们可以正确显示，但是在打开浏览器控制台时出现错误：

compiler.js:18239 ERROR TypeError: Cannot read property 'length' of undefined
compiler.js:18239 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}

我已将用户加载移动到ngOnInit上，在那里我将数据订阅并保存到'this.users'数组中，

  users: User[] = [];
  constructor(
    public userService: UserService
  ) { }
  ngOnInit(): void {
    this.userService.getAllUsers()
      .subscribe(
        data => {
          this.users = data;
        }
      );
  }

HTML组件：

<nz-table [nzData]="users" [nzShowPagination]="false">
        <tr>
          <th>User</th>
        </tr>
    <tbody>
        <tr *ngFor="let data of users">
          <td>{{ data.userName }}</td>
        </tr>
      </tbody>
    </nz-table>

为什么当数据明确定义并在列表中可见时出现未定义错误？

Answer 1

当您的数据尚不存在（您的订阅尚未完成）但定义了数组时，该错误会在第一个角度检查循环中出现。订阅完成后，它将自行解决。如果您想消除错误，只需在您的*ngIf="users"标记中添加一个nz-table

无法读取已定义对象的“长度”属性

1 个答案: