Angular 2：在 ngFor 中对齐/定位项目

Question

我正在学习 Angular2。我正在尝试将数组值绑定到 UI。为此，我正在使用 ngFor 和 ngSwitch。我想根据ngSwitchCase显示记录。但现在它根据数组中的 id 显示记录。

HTML

<div *ngFor="let item of items; let i=index;">    
    <div [ngSwitch]="item.name">
        <div class="form-control" *ngSwitchCase="'months_name'">
            <label>First Field</label>
            <div class="ctrl-wpr">
                <md-input class="ctrl-wpr__ctrl" [(ngModel)]="item.value"></md-input>
            </div>
        </div>
        <div class="form-control" *ngSwitchCase="'current_medication'">
            <label>Second Field</label>
            <div class="ctrl-wpr">
                <md-input class="ctrl-wpr__ctrl" [(ngModel)]="item.value"></md-input>
            </div>
        </div>
        <div class="form-control" *ngSwitchCase="'occupation'">
            <label>Third Field</label>
            <div class="ctrl-wpr">
                <md-slide-toggle color="primary" [(ngModel)]="item.value"></md-slide-toggle>
            </div>
        </div>
        <div class="form-control" *ngSwitchCase="'current_medical_problems'">
            <label>First Field</label>
            <div class="ctrl-wpr">
                <md-input class="ctrl-wpr__ctrl" [(ngModel)]="item.value"></md-input>
            </div>
        </div>
        <div class="form-control" *ngSwitchCase="'husband_medication'">
            <label>Second Field</label>
            <div class="ctrl-wpr">
                <md-input class="ctrl-wpr__ctrl" [(ngModel)]="item.value"></md-input>
            </div>
        </div>
        <div class="form-control" *ngSwitchCase="'spouseOccupation'">
            <label>Third Field</label>
            <div class="ctrl-wpr">
                <md-slide-toggle color="primary" [(ngModel)]="item.value"></md-slide-toggle>
            </div>
        </div>
    </div>
</div>

脚本

items: any = [{
    "id": 2952,
    "name": "months_name",
    "value": "400201"
  }, {
    "id": 2964,
    "name": "occupation",
    "value": "Business"
  }, {
    "id": 7236,
    "name": "spouseOccupation",
    "value": "Housewife"
  }, {
    "id": 7244,
    "name": "analysis_report",
    "value": "11"
  }, {
    "id": 7245,
    "name": "husband_medication",
    "value": "No"
  }, {
    "id": 7246,
    "name": "current_medication",
    "value": ""
  }, {
    "id": 7247,
    "name": "current_medical_problems",
    "value": "Heart Problem",
  }]

帮助我如何根据*ngSwitchCase显示/定位记录。

Answer 1

一种快速的方法是对您的组件进行排序，在您的项目和您想要的顺序之间创建一个映射。在某种程度上，您正在复制代码，在您的组件上执行以下操作：

ngOnInit(){
  this.items.sort((a,b) => this.nameMapping(a.name) - this.nameMapping(b.name));
}

private nameMapping (name) {
  switch (name) {
    case 'months_name':
      return 1;
    case 'current_medication':
      return 2;
    case 'occupation':
      return 3;
    case 'current_medical_problems':
      return 4;
    case 'husband_medication':
      return 5;
    case 'spouseOccupation':
      return 6;
    default:
      return 100;
  }
}

更复杂的解决方案是执行组件上的所有逻辑，并在项目和视图之间创建适当的映射。像这样的：

ngOnInit(){
  this.items = this.items.map(this.mappingItems);
  this.items.sort((a,b) => a.order - b.order);
}

private mappingItems (item) {
  switch (item.name) {
    case 'months_name':
      item.order = 1;
      item.label = 'First Field';
      item.formType = 'input';
      return item;
    case 'current_medication':
      item.order = 2;
      item.label = 'Second Field';
      item.formType = 'input';
      return item;
    case 'occupation':
      item.order = 3;
      item.label = 'Third Field';
      item.formType = 'slider';
      return item;
    case 'current_medical_problems':
      item.order = 4;
      item.label = 'First Field';
      item.formType = 'input';
      return item;
    case 'husband_medication':
      item.order = 5;
      item.label = 'Second Field';
      item.formType = 'input';
      return item;
    case 'spouseOccupation':
      item.order = 6;
      item.label = 'Third Field';
      item.formType = 'slider';
      return item;
    default:
    item.order = 100;
      return item;
  }
}

那么你的 html 会是这样的：

<div *ngFor="let item of items; let i=index;">
    <div class="form-control">
        <label>{{ item.label }}</label>
        <div class="ctrl-wpr">
            <md-input class="ctrl-wpr__ctrl" [(ngModel)]="item.value" *ngIf="item.formType === 'input'"></md-input>
            <md-slide-toggle class="ctrl-wpr__ctrl" [(ngModel)]="item.value" *ngIf="item.formType === 'slider'"></md-slide-toggle>
        </div>
    </div>
</div>