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>