создание нескольких флажков в angular 9 не работает для меня - PullRequest
Новая
       50

создание нескольких флажков в angular 9 не работает для меня

0 голосов
/ 30 апреля 2020

Мне нужна таблица, содержащая флажок для каждой строки в таблице. Я использую Angular 9.

Таблица определена в форме, и я использую ngFor для создания каждой строки в таблице. В ngFor I l oop над коллекцией сообщений и я создаю строку для каждого сообщения.

Пользователь должен иметь возможность установить флажок и кнопку pu sh для повторной отправки выбранных сообщений. .

То, как я написал свой код, я получаю ошибки, которые не могу объяснить.

Я создал штуковину стекаблиц, чтобы поделиться своим кодом. https://stackblitz.com/edit/angular-4qqrzf?file=src%2Fapp%2Fapp.component.ts В этом коде в Stackblitz что-то не так. Самым раздражающим является то, что он постоянно говорит, что загружается, а ничего не происходит. Я, должно быть, чего-то там упускаю.

Если я запускаю код в моей собственной системе, я получаю эту ошибку: 

[Error] ERROR – TypeError: this.form.controls.orders.push is not a function. (In 'this.form.controls.orders.push(control)', 'this.form.controls.orders.push' is undefined) — app.component.ts:36
TypeError: this.form.controls.orders.push is not a function. (In 'this.form.controls.orders.push(control)', 'this.form.controls.orders.push' is undefined) — app.component.ts:36
    defaultErrorLogger (vendor.js:12499)
    handleError (vendor.js:12552)
    run (polyfills.js:136)
    (anonymous function) (vendor.js:45404)
    onInvoke (vendor.js:44403)
    run (polyfills.js:136)
    (anonymous function) (polyfills.js:870)
    onInvokeTask (vendor.js:44381)
    runTask (polyfills.js:180)
    drainMicroTaskQueue (polyfills.js:582)
    promiseReactionJob

Я скопировал большую часть кода из https://stackblitz.com/edit/angular-stszta?file=src%2Fapp%2Fapp.module.ts , где эта проблема не возникает.

app.component.ts: 

import { Component } from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  ordersData = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  berichten = [
    {messageId: 123},
    {messageId: 234},
    {messageId: 345},
    {messageId: 456},
    {messageId: 567}
  ];

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      orders: []
    });
    this.addCheckboxes();
  }

  private addCheckboxes() {
    this.ordersData.forEach((o, i) => {
      const control = new FormControl(i === 0); // if first item set to true, else false
      (this.form.controls.orders as FormArray).push(control);
    });
  }

  submit() {
    const selectedOrderIds = this.form.value.orders
      .map((v, i) => (v ? this.ordersData[i].id : null))
      .filter(v => v !== null);
    console.log(selectedOrderIds);
  }
}

app.component. html: 

  <table>
    <thead>
    <tr>
      <td>
        <b>Selection</b>
      </td>
      <td>
        <b>MessageId</b>
      </td>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let bericht of berichten; let i = index" >
      <td>
        <input type="checkbox" [formControlName]="i">
      </td>
      <td>
        {{bericht.messageId}}
      </td>
    </tr>
    </tbody>
  </table>
</form>

Что такое Я делаю не так? (В Stackblitz и в моем коде)

1 Ответ

1 голос
/ 30 апреля 2020

Форма показана с этими изменениями: 

//constructor     
orders: new FormArray([])



`//addCheckboxes`
(this.form.get('orders') as FormArray).push(control);

В шаблоне удалите привязку к элементу управления, который не существует 

[formControlName]="i"
...