Question

       <ul class="list-group" *ngFor="let head of channelDisplayHeads">
        <li class="list-group-item" *ngFor="let channel of channelList" ngIf="channel.channel.indexOf('head') === 1">
          <strong>{{ head }}</strong>
        </li>
      </ul>

这里的ngFor循环显示组头像＆＃34; A＆＃34;，＆＃34; B＆＃34;，＆＃34; C＆＃34;对于每个组头我试图列出以for循环所在的那个字母开头的通道。我试图使用ngIf来完成这个行为，但它似乎没有按预期工作。请指教！

Answer 1

这里有很多问题。

您的ngIf语法不正确。它必须是*ngIf。
您不能在同一元素上同时拥有*ngFor和*ngIf。其中一个使用ng-container。这是angular的元素，它不会在html中呈现，仅适用于angular指令。

您似乎将head变量作为字符串传递。如果要检查元素，请删除引号。

 <ul class="list-group" *ngFor="let head of channelDisplayHeads">
   <ng-container *ngFor="let channel of channelList">
     <li class="list-group-item" *ngIf="channel.channel.indexOf(head) === 1">
        <strong>{{ head }}</strong>
     </li>
   </ng-container>
 </ul>

Answer 2

最后，此代码按预期工作

 <ul class="list-group" *ngFor="let head of channelDisplayHeads">
                <h1>{{ head }}</h1>
                <ng-container *ngFor="let channel of channelList">
                  <li class="list-group-item" *ngIf="channel.channel.substr(0, 1) === head">
                    <strong></strong>
                    <strong>{{ channel.channel }} </strong>
                  </li>
                </ng-container>
              </ul>

Answer 3

您忘记了*，请按照以下说明将其包含在内，然后尝试一下，

 *ngIf="channel.channel.indexOf('head') === 1"

以下是为我工作

模板

   <ul *ngFor="let hero of numbers"  >  
   <div *ngIf="hero==1">
   {{hero}}
   </div>
   </ul>

ts文件

  numbers: Array<string> = new Array<string>();
  constructor()
  {
    this.numbers.push('1');
    this.numbers.push('2');
    this.numbers.push('3');
  }

Answer 4

不支持同一元素上的

ngIf和ngFor。在ngIf

中使用template

<ul class="list-group" *ngFor="let head of channelDisplayHeads">
    <h1>{{ head }}</h1>
    <ng-container *ngFor="let channel of channelList">
        <li class="list-group-item" *ngIf="channel.channel.substr(0, 1) === head"> <strong></strong> <strong>{{ channel.channel }} </strong> </li>
    </ng-container>
</ul>

ngIf找到substr

4 个答案: