Question

我正在使用Ionic和Angular构建应用程序。使用Ionic的网格布局，我根据下面的设计布局提供以下代码：

<div id ="neededfoodnames" *ngFor="let list of lists; let i = index">

  <ion-item (click)="togglefoods(list.category)" *ngIf="lists[i-1]?.category != list.category" class="categoryList">
    {{list.category}}
    <ion-icon item-right name="arrow-forward" *ngIf="list.category != currentCategory"></ion-icon>
    <ion-icon item-right name="arrow-down" *ngIf="list.category == currentCategory"></ion-icon>
  </ion-item>

<div class="foodList" *ngIf="list.category == currentCategory" (click)="unlist(list)">
    <ion-grid>
      <ion-row>
        <ion-col>
        </ion-col>
        <ion-col>
          We Need
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="offFoods">
          {{list.foodname}}
        </ion-col>
        <ion-col  class="onFoods">
          {{list.foodname}}
        </ion-col>
      </ion-row>
    </ion-grid>
</div>
</div>

然而，文字＆＃34; We Need＆＃34;每次从数据库中提取新的list.foodname时都会显示。如何保留此文本并仅显示一次？

Answer 1

<div class="foodList">
  <ion-row>
      <ion-col>
      </ion-col>
      <ion-col>
         We Need
      </ion-col>
  </ion-row>
  <ion-grid *ngIf="list.category == currentCategory" (click)="unlist(list)">

    <ion-row>
      <ion-col class="offFoods">
        {{list.foodname}}
      </ion-col>
      <ion-col  class="onFoods">
        {{list.foodname}}
      </ion-col>
    </ion-row>
  </ion-grid>
</div>

试试这个。这将永远取消离子网格。你将获得网格列表。或者你必须在食品清单之外移动'我们需要'

Answer 2

您可以使用ngIf使用技巧一次显示文字。

<ion-grid>
   <ion-row *ngIf="i == 0">
      <ion-col>
      </ion-col>
      <ion-col>
         We Need
      </ion-col>
   </ion-row>
   <ion-row>
      <ion-col class="offFoods">
         {{list.foodname}}
      </ion-col>
      <ion-col  class="onFoods">
         {{list.foodname}}
      </ion-col>
   </ion-row>
</ion-grid>

Answer 3

使用

在TS代码中进行数据处理可能更好

this.lists =  this.lists.filter(item=>{
return item != ....})

这是为了更好的可读性，代码处理和测试

除了“我们需要”的问题之外，还有适合食物名称的字符串。

此致

汤姆

使用Angular或Ionic，如何排除字符串被循环？

3 个答案: