*ngIf和*ngFor在同一个元素上导致错误

我在尝试在同一个元素上使用Angular的*ngFor和*ngIf时遇到了一个问题。

当试图在*ngFor中循环该集合时，该集合被视为null，因此当试图在模板中访问其属性时失败。

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

    <div *ngIf="show" *ngFor="let thing of stuff">
      {{log(thing)}}
      <span>{{thing.name}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { name: 'other', id: 6 },
    ]
  }

  toggle() {
    this.show = !this.show;
  }

  log(thing) {
    console.log(thing);
  }

}

我知道简单的解决方案是将*ngIf移动到一个级别，但对于像在ul中循环列表项这样的场景，如果集合为空，我最终会得到一个空li，或者我的lis被多余的容器元素包装。

比如在这个地方。

注意控制台错误:

EXCEPTION: TypeError: Cannot read property 'name' of null in [{{thing.name}} in ShellComponent@5:12]

是我做错了什么还是这是个bug?

当前回答

我不想用*ngIf或使用[ngClass]将我的*ngFor包装到另一个div中，所以我创建了一个名为show的管道:

show.pipe.ts

export class ShowPipe implements PipeTransform {    
  transform(values: any[], show: boolean): any[] {
    if (!show) {
      return[];
    }
    return values;
  }
}

any.page.html

<table>
  <tr *ngFor="let arr of anyArray | show : ngIfCondition">
    <td>{{arr.label}}</td>
  </tr>
</table>

2020-10-23 08:03:21

其他回答

我不想用*ngIf或使用[ngClass]将我的*ngFor包装到另一个div中，所以我创建了一个名为show的管道:

show.pipe.ts

export class ShowPipe implements PipeTransform {    
  transform(values: any[], show: boolean): any[] {
    if (!show) {
      return[];
    }
    return values;
  }
}

any.page.html

<table>
  <tr *ngFor="let arr of anyArray | show : ngIfCondition">
    <td>{{arr.label}}</td>
  </tr>
</table>

2020-10-23 08:03:21

这将起作用，但元素仍然在DOM中。

.hidden {
    display: none;
}

<div [class.hidden]="!show" *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
</div>

2016-08-15 17:25:22

下表仅列出具有“初学者”值集的项目。需要*ngFor和*ngIf来防止html中不需要的行。

最初有*ngIf和*ngFor在同一个<tr>标签上，但不工作。为*ngFor循环添加了一个<div>，并将*ngIf放在<tr>标签中，如预期的那样工作。

<table class="table lessons-list card card-strong ">
  <tbody>
  <div *ngFor="let lesson of lessons" >
   <tr *ngIf="lesson.isBeginner">
    <!-- next line doesn't work -->
    <!-- <tr *ngFor="let lesson of lessons" *ngIf="lesson.isBeginner"> -->
    <td class="lesson-title">{{lesson.description}}</td>
    <td class="duration">
      <i class="fa fa-clock-o"></i>
      <span>{{lesson.duration}}</span>
    </td>
   </tr>
  </div>
  </tbody>

</table>

2016-12-19 19:59:48

你也可以使用ng-template(而不是template。在同一个HTML元素上同时应用*ngFor和ngIf，请参见使用模板标签的注意事项)。下面是一个例子，你可以同时使用*ngIf和*ngFor来处理angular表中的同一个tr元素。

<tr *ngFor = "let fruit of fruiArray">
    <ng-template [ngIf] = "fruit=='apple'>
        <td> I love apples!</td>
    </ng-template>
</tr>

where fruiArray = ['apple'， 'banana'， 'mango'， 'pineapple']。

注意:

只使用template标记而不使用ng-template标记的警告是，它会在某些地方抛出StaticInjectionError。

2019-02-01 10:39:42

在html中:

<div [ngClass]="{'disabled-field': !show}" *ngFor="let thing of stuff">
    {{thing.name}}
</div>

在css中:

.disabled-field {
    pointer-events: none;
    display: none;
}

2019-04-19 05:14:38

ngIf和ngFor在同一个元素上导致错误

推荐文章

最新文章

标签