Angular: привязка к ngIf внутри ngFor

Question

Я пытаюсь заполнить список условием для каждого элемента списка, где условие можно изменить с помощью пользовательского ввода. Например: app.component.ts

private check = true;
private some = [
    {name: 'ABC', condition: true},
    {name: 'def', condition: this.check},
    {name: 'GHI', condition: true}
];

app.component. html

<div *ngFor="let item of some">
  <div *ngIf="item.condition">
  {{item.name}}
  </div>
</div>

<select [(ngModel)]="check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

Здесь у меня есть список ['ABC', 'def', 'GHI'], некоторые элементы которого я хочу отображать всегда (condition: true) а для остальных я поместил условие в переменную (check). Список загружается правильно, но при изменении переменной условия (check) через раскрывающийся список изменения не отражаются (список не обновляется). Буду признателен за любую помощь!

Answer 1

Вы должны использовать объект, чтобы свойство «checked» связывалось с массивом.
Кроме того, вы должны использовать <ng-container>, чтобы не генерировать HTML, если условие ложно.

<!-- HTML -->
<ng-container *ngFor="let item of some">
  <div *ngIf="item.condition">
    {{item.name}}
  </div>
</ng-container>

<select [(ngModel)]="myFakeForm.check">
  <option [value]="true">true</option>
  <option [value]="false">false</option>
</select>

// TS
public myFakeForm = { check: true }
public some = [
    {name: 'ABC', condition: true},
    {name: 'def', condition: this.myFakeForm.check},
    {name: 'GHI', condition: true}
];

Answer 2

1. Вы должны использовать доступ publi c для полей, разрешенных в шаблоне.
2. this.check передается как значение, а не как ссылка на поле компонента - поэтому оно не изменяется при раскрывающемся списке.

Таким образом, чтобы это исправить, вы должны как-то передать флаг "check" по ссылке. Вы можете изменить проверку с логического на некоторый объект, например: check = {value: boolean = true}; или придумать более общий c подход :)