Невозможно связать массив с ngModel в angular, потому что индекс доступен только для чтения - PullRequest
Новая
       79

Невозможно связать массив с ngModel в angular, потому что индекс доступен только для чтения

0 голосов
/ 02 августа 2020 
<div *ngFor="let x of options; let i = index;trackBy:trackByIdx">
    <mat-form-field class="full-width" appearance="fill">
        <mat-label>Option</mat-label>
        <input type="input" [(ngModel)]="options[i]" matInput>
    </mat-form-field>
</div>

По какой-то странной причине я получаю сообщение об ошибке из шаблона при попытке изменить форму викторины. Я получаю ERROR TypeError: 0 доступен только для чтения из [(ngModel)] = "options [i]", что означает, что ошибка исходит из шаблона. 

@Input() title: string;
@Input() options: string[];
@Output() titleEmitter: EventEmitter<string> = new EventEmitter<string>();
@Output() optionsEmitter: EventEmitter<string[]> = new EventEmitter<string[]>();
  
onAddOptions() {
    if (this.options && this.options.length < 11) {

      this.optionsEmitter.emit([...this.options, '']);
    }
}
  
emitOptions(index: number) {
    this.optionsEmitter.emit([...this.options.slice(0, index), this.options[index], ...((this.options[index+1]) ? this.options.slice(index + 1) : [])])
}

Я не уверен, что остальные кода будет работать так, как задумано, потому что ошибка возникает из шаблона, но я надеюсь понять, почему он вызывает ошибку. Индекс доступен только для чтения? Кажется, это исходит из индекса, потому что я также получаю ERROR TypeError: 1 доступен только для чтения, когда я пытаюсь отредактировать второй вариант.

1 Ответ

0 голосов
/ 02 августа 2020

нет необходимости использовать индекс в ngModel . Поскольку я вижу, вам просто нужно связать ввод со значением, используя для l oop.

Вы можете просто заменить свой html код следующим кодом строк. Это устранит вашу ошибку, и вы сможете добиться того же, чего хотите. 

<div *ngFor="let x of options; let i = index;trackBy:trackByIdx">
    <mat-form-field class="full-width" appearance="fill">
        <mat-label>Option</mat-label>
        <input type="input" [(ngModel)]="x" matInput>
    </mat-form-field>
</div>
...