* ngFor с вложенным массивом - PullRequest
Новая
       26

* ngFor с вложенным массивом

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

(извините за эту тему, но больше ничего не думаю)

Привет, я получаю JSON данных следующим образом: 

{
(... some stuff...)

"credentials": {
    "credential": [{
        "username": "Peter",
        "password": "dummy1"
    }, {
        "username": "Marc",
        "password": "dummy2"
    }, {
        "username": "Oliver",
        "password": "dummy3"
    }, {
        "username": "Tom",
        "password": "dummy4"
    }, {
        "username": "Brian",
        "password": "dummy5"
    }]
}

}

и я хочу отобразить их с помощью * ngFor следующим образом: 

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

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
          </ng-container>
        </div>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      // credentials: {credential: new FormArray([])}
      credentials: {credential: this.fb.array([])}
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    // const creds = this.form.controls.credentials.value.credential as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }
}

Но это не работает. :-( Q: Как я могу отобразить все credentials с помощью * ngFor? Для меня важно только ist * ngFor в этом случае.

Заранее благодарю и приветствую Filout

1 Ответ

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

Запись в тс. 

this.form = this.fb.group({
  published: true 
  credentials: this.fb.array([])}
});

 get credentials() {
      return this.form.get('credentials') as FormArray

В html

*ngFor="let creds of credentials?.controls; ......
...