首页 文章

Angular：当json-pipe显示属性时，无法读取undefined的属性

提问于
浏览 次
1

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(...) 向我显示过滤器infact至少有一个标签，这就是为什么 ngFor 执行（不确定这是否是正确的单词） {{tag.id}} ，但是我仍然收到以下错误：

ERROR TypeError: Cannot read property 'id' of undefined

由于我已经使用 nfIf 来检查那里是 Filter 并且我已经在使用 ngFor 来检查标签，我完全不知道我做错了什么 .

如果重要的话， Array<Filters> 和 Array<Tags> 都是json数组（在html中显示它们需要 json -pipe）

angular typescript

1 回答

  • 2

    问题在这里：

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

    你的 mat-list 在这里结束了 span 你正在使用的 tag.id 低于那个 . 因此它是 undefined .

    重构 mat-list 的结束标记，以便在 mat-list 中包含 span . 像这样的东西：

    <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">
        <span>
          {{tag.id}}
        </span> here
      </mat-list>
    </ng-container>

  </div>
</div>
    回复于

相关问题