Question

请协助。我在stackblitz或stackblitz 2中有下表。该表的组成部分如下：

export class AppComponent {
   gender = [
      { id: 1, value : 'Female' },
      { id: 2, value : 'Male' }
    ];

   age = [
    { id: 1, value: 'Adults' },
    { id: 2, value: 'Children' },
    { id: 3, value: 'Creatures' },
    { id: 5, value: 'Youth' }
    ];

  color = [
    { id: 1, value: 'Black' },
    { id: 2, value: 'White' },
    { id: 3, value: 'Brown' },
  ];
}

表格视图如下：

      <div *ngFor="let gender of gender; let g = index;">
        <table class="table-bordered">
          <tr>
            <td>
              <span>{{gender.value}}</span>
            </td>
            <td>
              <table class="table-bordered">
                <tr *ngIf="g === 0">
                  <td>Age</td>
                  <td *ngFor="let color of color; let r = index;">{{ color.value }}</td>
                </tr>
                <tr *ngFor="let age of age; let a = index;">
                  <td>{{ age.value }}</td>
                  <td>
                    <input [id]="" type="text" #black />
                  </td>
                  <td>
                    <input [id]="" type="text" #white />
                  </td>
                  <td>
                    <input [id]="" type="text" #brown/>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>

我可以使用ViewChildren从视图中获取数据，例如@ViewChildren(brown) brown: QueryList<elementRef>;，因为我添加了#brown。根据angular doc使用ElementRef可能会带来一些安全隐患。

问题：当我有这样一个表时，如何从组件中获取数据，并且在不使用ViewChildren或ViewChild的情况下更好地将数据从视图获取到组件？

如果我必须在表格中引入反应形式，我该如何实施呢？

非常感谢您的帮助。谢谢。

Answer 1

嘿，我设法让你的代码正常工作。我不得不使用ReactiveForms。这是链接https://angular-multiple-forms.stackblitz.io。 https://stackblitz.com/edit/angular-multiple-forms?file=src%2Fpolyfills.ts 这是代码本身。

<强> app.module.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms' ;

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
   beneficiary: any[];
   validationForm:any;
   gender = [
      { id: 1, value : 'Female' },
      { id: 2, value : 'Male' }
    ];

  age = [
    { id: 1, value: 'Adults' },
    { id: 2, value: 'Children (6-17)' },
    { id: 3, value: 'Creatures' },
    {
      id: 4,
      value: 'Early Childhood (0-5)'
    },
    { id: 5, value: 'Youth (18-35)' }
  ];

  color = [
    { id: 1, value: 'Black' },
    { id: 2, value: 'White' },
    { id: 3, value: 'Brown' },
  ];

 constructor(private formBuilder: FormBuilder) {}

 ngOnInit() {
  this.validationForm = this.formBuilder.group({
  items: this.formBuilder.array(
    [this.buildForm()],
  )});
  this.initForm();
 }

 public initForm(): void{
  let formsCount = this.gender.length * this.age.length;
  for (let i= 1; i < formsCount; i++){
    this.validationForm.get('items').push(this.buildForm())
  }
 }

 public buildForm(): FormGroup {
  return this.formBuilder.group({
    black: this.formBuilder.control({value:'Me',disabled: false}, 
   [Validators.required]),
    white: this.formBuilder.control({value:'You',disabled: false}, [Validators.required]),
    brown: this.formBuilder.control({value:'Her',disabled: false}, 
   [Validators.required])
  });
 }

 public onSubmit(): void{
  let formData = this.validationForm.value.items;
  console.log(formData);
 }

}

<强> app.component.ts

          <div *ngFor="let gender of gender; let g = index;">
        <table class="table-bordered">
          <tr>
            <td>
              <span>{{gender.value}}</span>
            </td>
            <td>
              <table class="table-bordered">
                <tr *ngIf="g === 0">
                  <td>Age</td>
                  <td *ngFor="let color of color; let r = index;">{{ color.value }}</td>
                </tr>
                <tr *ngFor="let age of age; let a = index;">
                  <form (ngSubmit)="onSubmit()" [formGroup]="validationForm">
                    <fieldset formArrayName="items">
                      <div class="form-group" [formGroup]="validationForm.get('items').controls[a]">
                      <td>{{ age.value }}</td>
                      <td>
                        <input formControlName="black" [id]="" type="text"/>
                      </td>
                      <td>
                        <input formControlName="white" [id]="" type="text"/>
                      </td>
                      <td>
                        <input formControlName="brown" [id]="" type="text"/>
                      </td>
                      </div>
                    </fieldset>
                  </form>

                </tr>
              </table>
            </td>
          </tr>
        </table>
        <button (click)="onSubmit()" type="button">Submit</button>
      </div>

<强> app.component.html

rsg-components

Angular：在表

1 个答案: