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

Question

我有一个嵌套在两个 ngFor 中的 ngIf，用于制作离子列表，但我不想要重复的离子列表，有没有办法使如果 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>