Question

我正在学习Angular，但我不明白为什么我无法从模板中的component.ts文件中获取对象的属性。

我的代码：

来自app.component.html

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select
  (click)="methood()" >
    <mat-option
    *ngFor="let color of colors"
    [value]="color.id">
      {{color.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

来自app.component.ts

export class AppComponent {
  colors: [
    { id: 1, name: 'Red' },
    { id: 2, name: 'Green' },
    { id: 3, name: 'Blue' }
  ];

  methood() {console.log(this.colors, 'hello'); }
}

它应该显示带有颜色的下拉列表，但是没有。

Answer 1

您使用的是:而不是=

export class AppComponent {
  colors = [ // <-- here
    { id: 1, name: 'Red' },
    { id: 2, name: 'Green' },
    { id: 3, name: 'Blue' }
  ];

  methood() {console.log(this.colors, 'hello'); }
}

Answer 2

请检查打字稿的基础知识以及如何分配值。

您尝试通过此语句进行分配：

colors: [
    { id: 1, name: 'Red' },
    { id: 2, name: 'Green' },
    { id: 3, name: 'Blue' }
  ];

它必须是：

colors = [
    { id: 1, name: 'Red' },
    { id: 2, name: 'Green' },
    { id: 3, name: 'Blue' }
  ];

或

colors: any[] = [ <--- or your type
    { id: 1, name: 'Red' },
    { id: 2, name: 'Green' },
    { id: 3, name: 'Blue' }
  ];

找不到对象。（定义对象时未定义）

2 个答案: