当我们以动态形式angular-7使用ngswitch时，如何在html中使用col-6来使两个表单控件彼此相邻。

Question

我正在尝试使用ngswitch以动态形式在2个不同列中创建分隔行，但是ngswitch正在以某种方式创建一个全新的对象。

有什么方法可以使ngSwitch在适当的列中分隔行？并可以维护网格列？

基本上，我想在第6列中放置一个文本框，在第6列中放置1个下拉列表，在第6列中放置一个数字，以便它们可以彼此相邻。

我尝试过的stackblitz代码https://stackblitz.com/edit/angular-hunqiq

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

@Component({   
  selector: 'app-dynamic-form',   
  templateUrl: './dynamic-form.component.html',   
  styleUrls: ['./dynamic-form.component.css'] 
}) 
export class DynamicFormComponent implements OnInit { 
  myFormGroup:FormGroup;
  form_template = [
  {
    "type":"textBox",
    "label":"Name",
  },
  {
    "type":"number",
    "label":"Age"
  },
  {
    "type":"select",
    "label":"favorite book",
    "options":["Jane Eyre","Pride and Prejudice","Wuthering Heights"]
  }
]

  constructor() {}    
  ngOnInit() {
    let group={}    
    this.form_template.forEach(input_template=>{
      group[input_template.label]=new FormControl('');  
    })
    this.myFormGroup = new FromGroup(group);
  }
  onSubmit(){
    console.log(this.myFormGroup.value);
  }
}

<form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
  <div *ngFor="let form_elem of form_template" class="row">
  <div [ngSwitch]="form_elem.type">
    <div *ngSwitchCase="'textBox'" class="col-6">
      <input type="text" formControlName="{{form_elem.label}}"/>
    </div>
    <div class="col-6">
     <div *ngSwitchCase="'number'" >
      <input type="number" formControlName="{{form_elem.label}}"/>
    </div>
    <div *ngSwitchCase="'select'">
      <select formControlName="{{form_elem.label}}">
        <option *ngFor="let opt of form_elem.options">
          {{opt}}
        </option>
      </select>
    </div>
    </div> 
  </div>  
  </div>
  <input type="submit" value="save"/>
</form>

我正在尝试使用ngswitch以动态形式在2个不同列中创建分隔行，但是ngswitch正在以某种方式创建一个全新的对象。有什么方法可以使ngSwitch在适当的位置分隔行...

Answer 1

我想ngfor会覆盖行和列。