Есть ли в любом случае разделить строку в разных столбцов только с одной нг для итерации? - PullRequest
Новая
       42

Есть ли в любом случае разделить строку в разных столбцов только с одной нг для итерации?

0 голосов
/ 23 февраля 2020

Я хотел бы поместить текстовое поле в col-6, а другие типы в другие col-6, чтобы они могли быть рядом друг с другом.

Я попытался использовать 2 * ngFor итераций, и это отображение, которое я хочу, но мы можем сделать только с одной итерацией?

enter image description here https://stackblitz.com/edit/angular-hunqiq

1 Ответ

1 голос
/ 23 февраля 2020

Привет, Браво, чтобы достичь того, чего ты хочешь, нужно изменить порядок, который вы перечисляете в компоненте следующим образом: 

form_template = [
  {
    "type":"textBox",
    "label":"Name",
  },
  {
    "type":"number",
    "label":"Age"
  },
  {
    "type":"textBox",
    "label":"Name2",
  },
  {
    "type":"number",
    "label":"Age2"
  },
  {
    "type":"textBox",
    "label":"Name3",
  },
  {
    "type":"number",
    "label":"Age3"
  },
  {
    "type":"textBox",
    "label":"Name4",
  },
  {
    "type":"number",
    "label":"Age4"
  },
  {
    "type":"select",
    "label":"favorite book",
    "options":["Jane Eyre","Pride and Prejudice","Wuthering Heights"]
  }
]

Тогда вы сможете использовать один * ngДля этого: 

<div class="container-fluid">
    <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
        <div class="row">
                <ng-container *ngFor="let form_elem of form_template">
                  <div class="col-6">
                    <ng-container [ngSwitch]="form_elem.type">
                        <div class="col-md-6 mt-4 form-group">
                            <ng-container *ngSwitchCase="'textBox'" class="">
                                <div class="row">
                                    <label class="col-sm-4"> {{form_elem.label}}</label>
                                    <input class="form-control col-sm-6" type="text" formControlName="{{form_elem.label}}" />
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'number'">
                                <div class="row">
                                    <label class="col-sm-4"> {{form_elem.label}}</label>
                                    <input type="number" class="col-sm-6 form-control" formControlName="{{form_elem.label}}" />
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'select'" class="">
                                <div class="row">
                                    <label class="col-sm-4"> {{form_elem.label}}</label>
                                    <select class="custom-select  col-sm-6" formControlName="{{form_elem.label}}">
                                        <option *ngFor="let opt of form_elem.options">
                                            {{opt}}
                                        </option>
                                    </select>
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'select'" class="">
                                <div class="form-group row">
                                    <div class="col-sm-10">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="gridCheck1">
                                            <label class="form-check-label" for="gridCheck1">
                                                Example checkbox
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </ng-container>
                            <ng-container *ngSwitchCase="'select'" class="">
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="optradio">Option 1
                                    </label>
                                </div>
                                <div class="form-check-inline">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="optradio">Option 2
                                    </label>
                                </div>
                            </ng-container>
                        </div>
                    </ng-container>
                  </div>
            </ng-container>
        </div>
        <input class="mt-2 btn btn-primary" type="submit" value="save" />
    </form>
</div>

Надеюсь, это поможет. Удачи!

...