[Angular 18]错误：找不到 id 为“complete”的列

Question

我正在尝试阅读名为“Pro Angular 16”的书，但由于嵌入在 Angular 18 开发工具中的 TypeScript 编译器引发的以下错误，我再次陷入了第 2 章的困境：

Error: Could not find column with id "complete".

相关的类似问题和答案让我无法解决问题，所以我在这里试试运气。

app.component.ts

import { Component } from '@angular/core';
import { TodoList } from "./todoList";
import { TodoItem } from "./todoItem";
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatBadgeModule } from '@angular/material/badge';
import { MatTableModule } from '@angular/material/table';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    FormsModule,
    MatButtonModule, MatToolbarModule, MatIconModule, MatBadgeModule,
    MatTableModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSlideToggleModule ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})


export class AppComponent {
  title = 'todo';
  private list = new TodoList('Aurèle', [
    new TodoItem("Finish the UBC website", true),
    new TodoItem('Write some unit tests'),
    new TodoItem('Learn Angular'),
    new TodoItem('Write a word document for the jury'),
    new TodoItem('Buy INCOSE book related to SysML v2', true),
  ]);

  get username(): string {
    return this.list.user;
  }

  get itemCount(): number {
    return this.list.items.filter(item => !item.complete).length;
  }

  get items(): readonly TodoItem[] {
    return this.list.items;
  }
}

app.component.html

<div class="tableContainer">
   <table mat-table [dataSource]="items" class="mat-elevation-z3 fullWidth">
      <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>#</th>
         <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
      </ng-container>
      
      <ng-container matColumnDef="task">
         <th mat-header-cell *matHeaderCellDef>Task</th>
         <td mat-cell *matCellDef="let item">{{ item.task }}</td>
      </ng-container>
      
      <ng-container matColumDef="complete">
         <th mat-header-cell *matHeaderCellDef>Done</th>
         <th mat-cell *matCellDef="let item">{{ item.complete }}</th>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['id', 'task', 'complete']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['id', 'task', 'complete'];"></tr>
   </table>
</div>

todoItem.ts

export class TodoItem {
  constructor(public task: string, public complete: boolean = false) {
  }
}

todoList.ts

import { TodoItem } from "./todoItem";

export class TodoList {
   constructor(public user: string, private todoItems: TodoItem[] = []) {
   }

   get items(): readonly TodoItem[] {
      return this.todoItems;
   }

   addItem(task: string) {
      this.todoItems.push(new TodoItem(task));
   }
}

id

专栏确实存在，所以我很茫然，没有知识自行解决这个阻塞。

Answer 1

您面临的问题是您的

TodoItem

对象没有名为“done”的属性。

也就是说，在 HTML 模板中，您明确声明表的 third 列必须从属性“done”填充。请在下面找到正在寻找“done”属性的代码片段：

因此，您可以在

TodoItem

类/接口中添加此属性，或者从 HTML 模板中删除提到的列。