Question

filter.ts

export interface Filter {
    id: number;
    name: string;
    tags: Array<Tag>;
}

tag.ts

export interface Tag {
    id: number;
    value: string;
}

filters.component.ts

export class FiltersComponent implements OnInit {
//Filter contains a list of tags
public filterList: Array<Filter>;
public selectedFilter: Filter;

constructor(private filterService: FiltersService) {
  this.filterList = new Array<Filter>();
}

ngOnInit() {
  this.filterService.getAllFilters().subscribe(filter => setTimeout(
    () => this.filterList.push(...filter), 2000
  ))
}

onSelect(f: Filter){
  if(f === this.selectedFilter){
    this.selectedFilter = null;
  }else{
    this.selectedFilter = f;
    console.log(this.selectedFilter);
  }
}
}

filters.component.html

  <div>
    <div class="left">
      <mat-list class="filter-list" *ngFor="let f of filterList"
                (click)="onSelect(f)">
        <span>
          {{f.id}}
        </span>
        <span>
          {{f.name}}
        </span>
      </mat-list>
    </div>
    <div class="right">
      <ng-container *ngIf="selectedFilter">
        {{selectedFilter | json}}
        <mat-list *ngFor="let tag of selectedFilter.tags"></mat-list>
        <span>
          {{tag.id}}
        </span>
        here
      </ng-container>

    </div>
  </div>

在那段代码之后，这是我的问题：

我正在尝试访问html中的{{tag.id}}。 console.log(...)告诉我过滤器实际上有至少一个标签，这就是ngFor执行{{tag.id}}（不确定是否正确的词）的原因，但是我仍然得到出现以下错误：

ERROR TypeError: Cannot read property 'id' of undefined

由于我已经在使用nfIf来检查是否存在Filter，并且已经在使用ngFor来检查标签，所以我完全不知道自己在做什么错误的。

如果有关系，Array<Filters>和Array<Tags>都是json数组（以html显示它们需要json-pipe）

Answer 1

问题在这里：

<mat-list *ngFor="let tag of selectedFilter.tags"></mat-list>

您的mat-list到此为止，而您使用span的{{1}}在其下方。因此它是tag.id。

以某种方式重组undefined的结束标签，以将mat-list包含在span内。像这样：

mat-list

角度：json-pipe显示属性时无法读取未定义的属性

1 个答案: