Можно ли выполнить действие после ngIf?

у меня есть ngIf, вложенный в два ngFor, чтобы создать ion-list, но я не хочу дублировать ion-list, есть ли способ сделать это, если 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>

ionic-framework angular ionic2 angular-ng-if
person Jose Alberto Santiago Luna    schedule 28.06.2017    source источник
comment
Пожалуйста, добавьте немного кода, показывающего, что вы пробовали, что это дает вам и что вы хотели бы получить вместо этого.   -  person Duncan    schedule 28.06.2017
comment
@Duncan, я только что сделал, извините, если я хочу достаточно ясно   -  person Jose Alberto Santiago Luna    schedule 28.06.2017

Ответы (3)


arrow_upward
1
arrow_downward

Как насчет вызова функции из вашего шаблона? Я бы попробовал это:

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

А затем в вашем файле .ts:

 setToTrue(variable){
       variable = true;
    }
person Ari    schedule 28.06.2017
comment
Это именно то, что я искал, я надеюсь, что это работает! заранее спасибо - person Jose Alberto Santiago Luna; 28.06.2017
comment
не работает, я только что заметил, что это решение не меняет значение атрибута в массиве объектов, есть подсказка? - person Jose Alberto Santiago Luna; 28.06.2017

arrow_upward
0
arrow_downward

Важно понимать, что с 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>
person Duncan    schedule 29.06.2017

arrow_upward
-1
arrow_downward

Вы можете использовать функцию javascript в своем операторе ng-if, например:

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

а затем в вашем HTML <div ... ng-if="myNgIf()">my content</div>

person TSungur    schedule 28.06.2017
comment
можете ли вы показать мне, как выполнить это в коде, который я только что загрузил, и извините, что у меня нет кода с самого начала - person Jose Alberto Santiago Luna; 28.06.2017
comment
Извините, я не знал, что вы используете Angular 2. В файле класса Angular определите нужную функцию, например myNgIf(): boolean {//your code; // вернуть true/false;} и в вашем html-коде ‹ion-list *ngIf=myNgIf() .... - person TSungur; 28.06.2017