Блог

Главная - Вопросы по программированию - Как я могу использовать оператор if в ngfor?

Как я могу использовать оператор if в ngfor?

#angular #ngfor

#angular #ngfor

Вопрос:

У меня есть цикл из 5 кнопок, и я хочу отключить вторую кнопку, поэтому я попытался использовать *ngIf внутри *ngFor , но у меня это работает некорректно. Можете ли вы мне помочь? Спасибо!

 <div *ngFor="let day of days">
  <div *ngIf="day == dayFinished ">
    <ion-button id={{day}} expand="block" size="large (click)="test(day)"ngDefaultControl [(ngModel)]="days"  disabled >DAY {{day}}</ionbutton>
  </div>
</div>

Ответ №1:

Вы можете попробовать это

Если вы хотите отключить вторую кнопку в цикле, вы можете установить i==1 (потому что индекс всегда начинается с 0)

 <div *ngFor="let day of days; let i=index">
<div *ngIf="day == dayFinished ">
  <ion-button id={{day}} expand="block" size="large (click)="test(day)" ngDefaultControl [(ngModel)]="days" [disabled]="i==1" >DAY {{day}}</ionbutton>
</div>

Я надеюсь, что это будет полезно

Ответ №2:

Вы можете использовать функцию в ngFor вместо массива, подобного этому

в вашем html =>

 <div *ngFor="let day of filterDays()">
  <ion-button id={{day}} expand="block" size="large (click)="test(day)"ngDefaultControl [(ngModel)]="days" disabled >DAY {{day}}</ionbutton>

в вашем компоненте =>

 filterDays(){
  return days.filter(x => x.day == "dayFinished");
}

Ответ №3:

Вы можете использовать index с ngFor .

Вот как вы можете сделать

 <div *ngFor="let day of days; let i=index">
<div *ngIf="day == dayFinished ">
  <ion-button id={{day}} expand="block" size="large (click)="test(day)"ngDefaultControl [(ngModel)]="days"  [disabled]="i==1" >DAY {{day}}</ionbutton>
</div>

index всегда начинайте с 0, поэтому проверьте i==1

Комментарии:

1. Спасибо! Я вообще не использовал ngIf! Я только что добавил «i = index».

2. Итак, примите мой ответ, пожалуйста, если мой ответ сработал для вас

3. У меня есть другой вопрос. Могу ли я сделать индекс массивом? Чтобы объяснить это. Допустим, я заканчиваю день 1, поэтому я хочу отключить кнопку 1 на следующий день 2 и отключить кнопки 1 и 2 до последнего дня…. Я надеюсь, вы понимаете, что я имею в виду.

4. не могли бы вы задать это в отдельном вопросе с вашим кодом, в котором ваш объект содержит массивы, чтобы я мог получить лучшее представление

5. код такой: <div *ngFor=»пусть день дней, пусть i=index»> <идентификатор ion-button={{day}} развернуть =»размер блока» =»большой» (click) =»тест (день)» ngDefaultControl [(ngModel)]=»days» [отключено]=»i==dayFinished» >ДЕНЬ {{day}}</ion-button> </div> Проблема в том, что когда я меняю i от 1 до 2 кнопка, только кнопка 2 отключена. Тогда, если я изменю на 3, будет только 3. Но я хочу, чтобы все они были отключены.