Angular 2：在ng

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>