Angular 2：align/position items in 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>