Question

我有一个ngIf嵌套在两个ngFors中，制作一个离子列表，但我不想要重复定位的离子列表，有没有办法让它如果ngIf是正确的那么它改变一个变量值喜欢Show = false，所以它不会继续制作离子列表？感谢

这里是代码，***是我想要的那个，当它触发时它将所需的第二个值更改为hall.show为True，所以它不会重复

<ion-content padding>
  <template ngFor let-item [ngForOf]="listaRdy">
      <template ngFor let-hall [ngForOf]="pasillosObj">
        ***<ion-list *ngIf="item.pasillo==hall.value && hall.show ==false">
          <ion-list-header>{{hall.name}}</ion-list-header>
          <template ngFor let-articulo [ngForOf]="listaRdy">
            <ion-item *ngIf="articulo.pasillo==hall.value">{{articulo.name}}</ion-item>
          </template>
        </ion-list>
      </template>
  </template>
</ion-content>

Answer 1

如何从模板中调用函数？我会试试这个：

***<ion-list *ngIf="item.pasillo==hall.value && hall.show ==false">
{{setToTrue(hall.show)}}
...

然后在您的.ts文件中：

 setToTrue(variable){
       variable = true;
    }

Answer 2

重要的是要意识到，使用Angular，您的模板不会只渲染一次，只要任何表达式发生变化，它就会重新渲染。

这意味着如果您更改hall.show作为渲染模板的副作用，Angular将立即再次呈现它，并一次又一次地呈现它，直到它停止更改或直到Angular放弃并且您收到错误登录控制台。

这意味着没有办法实现你想要实现的目标，当你使用ngFor迭代它并且期望可预测的结果时，你无法更新元素的状态。

相反，您需要做的是遍历Typescript代码中的数据结构并预先计算所需的所有值，以便您可以干净地呈现模板。您可能需要更改构造数据的方式：例如，不是存储布尔标志来指示您是否已使用特定hall值，而是存储对要使用的值的引用。或者，更好的是，将单个pasillosObj列表拆分为附加到item元素的单独列表，这样您根本不需要ngIf：

<ion-content padding>
  <template ngFor let-item [ngForOf]="listaRdy">
      <template ngFor let-hall [ngForOf]="item.pasillosObj">
       <ion-list>
          <ion-list-header>{{hall.name}}</ion-list-header>
          <template ngFor let-articulo [ngForOf]="listaRdy">
            <ion-item *ngIf="articulo.pasillo==hall.value">{{articulo.name}}</ion-item>
          </template>
        </ion-list>
      </template>
  </template>
</ion-content>

Answer 3

您可以在ng-if语句中使用javascript函数，例如：

$scope.myNgIf=function(params){//Show=false or whatever; //return true of false;}

然后在您的HTML <div ... ng-if="myNgIf()">my content</div>

中

在ngIf之后可以采取行动吗？

3 个答案: