Question

我需要在表单的数组类型中添加一个控件，但是在映射值并将其添加到表单之前，我需要获取Observable的返回值。

在下面的代码中，即使没有可观察的值，也会插入一个空数组控件。

我需要确保在添加控件之前，subscribe中已返回所有可观察的数据。

完成此操作的方式是插入空白，我需要获取订阅内部返回的最后一个值，然后插入具有返回的用户数量的控件。

在我的HTML中，我需要显示带有用户名的复选框，以及是否标记了用户名，以及是否在数组中记录用户的ID和每个用户的布尔值。

component.ts

    users$ = this._store.select(usersSelectors.getUsers);

    this.myForm = this._formBuilder.group({
        // .... controls
    });

    this.users$.pipe(
        filter((data) => !!data),
        map(users => this._formBuilder.array(users.map(() => new FormControl(false))))
    ).subscribe(usersArray => 
        this.myForm.addControl('users', usersArray)
    );

component.html

<div class="col-md-3">
  <label for="users">Users</label>
  <div id="users" class="row">
    <div class="checkbox" class="col-sm-4"
      formArrayName="users"
      *ngFor="let item of myForm.get('users').controls; let i = index" >
      <label class="checkbox-inline">
        <input type="checkbox" [formControlName]="i"> {{ users$[i].name }}
      </label>
    </div>

从用户返回的收益：

0: {subscriber: false, avatar: "", name: "Paul", id: "eXrrdOfmUGYHFIOVCWjBnAO7PZ52" …}
1: {subscriber: true, avatar: "", name: "Will", id: "NoQMVGnCA6VPc42ksIa6AqZZNWL2" …}

标记用户时，用户控制应如下。

users: [
{eXrrdOfmUGYHFIOVCWjBnAO7PZ52: false}
{NoQMVGnCA6VPc42ksIa6AqZZNWL2: true}
]

Answer 1

您可以先创建表单，然后根据Observable值push控制表单数组。与此类似：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  users;
  form: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder
  ) {}

  get usersForm() {
    return (<FormArray>this.form.get('users')).controls;
  }

  ngOnInit() {

    this.form = this.fb.group({
      users: this.fb.array([])
    });

    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(users => {
        this.users = users;
        this.users.forEach(user => {
          if(typeof(user) == typeof(true)) this.usersForm.push(this.fb.control([user.tagged]));
        });
        console.log('Users Form: ', this.usersForm);
      });
  }
}

这里是 Sample StackBlitz 。

根据可观察到的收益以表格形式添加控件

1 个答案: