Создание нескольких флажков с * ngFor - PullRequest
Новая
       16

Создание нескольких флажков с * ngFor

0 голосов
/ 07 июня 2018

Я пытаюсь переписать часть кода, написанного на Angular 5, в котором используются три жестко закодированных флажка, чтобы они создавались динамически в зависимости от количества объектов, которые я получаю от серверной части.

В шаблоне было: 

<div class="row">
    <div class="col-md-3">
        <label class="control-label">Options 1</label>
        <input type="checkbox" id="option1" name="option1" [value]="true" [(ngModel)]="context.option1"
               (change)="context.option1 = !context.option1"/>
    </div>
     <div class="col-md-3">
        <label class="control-label">Options 2</label>
        <input type="checkbox" id="option2" name="option2" [value]="false" [checked]="context.option2"
               (change)="context.option2 = !context.option2"/>
     </div>
     <div class="col-md-3">
        <label class="control-label">Options 3</label>
        <input type="checkbox" id="option3" name="option3" [value]="false" [checked]="context.option3"
               (change)="context.option3 = !context.option3"/>
     </div>
</div>

и в модели (фрагмент): 

export class SomeClass {
    public company: string;
    ...
    public option3: boolean = false;
    public option2: boolean = false;
    public option1: boolean = false;
    ...

    constructor(company: string) {
        this.company = company;
        ...
    }
}

Теперь я переписал это так: Шаблон: 

<div class="row">
    <div class="col-md-3" *ngFor="let option of this.context.someClassWithBean.someBean; let i = index">
        <label class="control-label">Options {{i}}</label>
        <input type="checkbox" id="option{{i}}" name="option{{i}}" [value]="true" [(ngModel)]="context.options[i]"
               (change)="context.options[i] = !context.options[i]"/>
    </div>
</div>

и в модели (фрагмент): 

export class SomeClass {
    public company: string;
    ...
    public options: boolean [];
    ...

    constructor(company: string) {
        this.company = company;
        ...
    }
}

Конечно, у меня проблема.Код не выводит индекс для Option (Option 0, Option 1 ...), и если я удаляю [i] из (change)="context.options[i] = !context.options[i], он записывает Option 1 и т. Д., Но я сомневаюсь, что он работает, поскольку сейчас нет индекса длямассив.Кроме того, у меня есть

"ОШИБКА TypeError: Невозможно прочитать свойство '0' из неопределенного"

в обоих случаях.И я не уверен, что это правильный способ сделать это вообще.

Любой совет?

1 Ответ

0 голосов
/ 08 июня 2018

Для справки вот что было решением: в модели мне пришлось инициализировать массив: 

public options: boolean[] = [];

, а затем в компоненте мне пришлось добавить: 

if (this.context.options.length === 0) {
    this.context.someClassWithBean.someBean.forEach(() => {
        this.context.options.push(false);
    });
}
...