angular2填充ngFor在不同的網格單元

Question

我有一個數組：hobbies=['Reading','Sport','Travelling','Movies','Cooking','Singing'];

和模板現在我手動填充它：

<div class="my-checkbox"> 
    <!-- Hobbies --> 
    <span style="float: left; width: 100px;"><h5>Hobbies</h5></span> 

    <div class="mdl-grid"> 
     <div class="mdl-cell mdl-cell--4-col"> 
      <label #checkbox_1 class="mdl-checkbox mdl-js-checkbox" for="checkbox-1"> 
       <input type="checkbox" id="checkbox-1" name="hobbies" value="sport" 
       class="mdl-checkbox__input" > 
       <span class="mdl-checkbox__label">Sports</span> 
      </label> 
      <label #checkbox_2 class="mdl-checkbox mdl-js-checkbox" for="checkbox-2"> 
       <input type="checkbox" id="checkbox-2" name="hobbies" value="reading" class="mdl-checkbox__input"> 
       <span class="mdl-checkbox__label">Reading</span> 
      </label> 
     </div> 
     <div class="mdl-cell mdl-cell--4-col"> 

      <label #checkbox_3 class="mdl-checkbox mdl-js-checkbox" for="checkbox-3"> 
       <input type="checkbox" id="checkbox-3" name="hobbies" value="singing" 
       class="mdl-checkbox__input"> 
       <span class="mdl-checkbox__label">Singing</span> 
      </label> 
      <label #checkbox_4 class="mdl-checkbox mdl-js-checkbox" for="checkbox-4"> 
       <input type="checkbox" id="checkbox-4" name="hobbies" value="travelling" 
       class="mdl-checkbox__input"> 
       <span class="mdl-checkbox__label">Travelling</span> 
      </label> 
     </div> 
     <div class="mdl-cell mdl-cell--4-col"> 
      <label #checkbox_5 class="mdl-checkbox mdl-js-checkbox" for="checkbox-5"> 
       <input type="checkbox" id="checkbox-5" name="hobbies" value="movies" 
       class="mdl-checkbox__input"> 
       <span class="mdl-checkbox__label">Movies</span> 
      </label> 
      <label #checkbox_6 class="mdl-checkbox mdl-js-checkbox" for="checkbox-6"> 
       <input type="checkbox" id="checkbox-6" name="hobbies" value="cooking" 
       class="mdl-checkbox__input"> 
       <span class="mdl-checkbox__label">Cooking</span> 
      </label> 
     </div> 
    </div> 

它看起來像以下：

我想改爲使用ngFor填充這些複選框，但保持結構完整，即替代值是inserte d爲連續的細胞是這樣的：

<div class="mdl-grid" *ngFor="let hobby of hobbies"> 
<div class="mdl-cell mdl-cell--4-col"> 
    <label #checkbox_1 class="mdl-checkbox mdl-js-checkbox" for="checkbox-1"> 
     <input type="checkbox" id="checkbox-1" name="hobbies" value="sport" 
     class="mdl-checkbox__input" > 
     <span class="mdl-checkbox__label">{{hobby}}</span> 
    </label> 
    <label #checkbox_2 class="mdl-checkbox mdl-js-checkbox" for="checkbox-1"> 
     <input type="checkbox" id="checkbox-1" name="hobbies" value="sport" 
     class="mdl-checkbox__input" > 
     <span class="mdl-checkbox__label">{{hobby}}</span> 
    </label>        
</div> 
</div> 

而且，因爲這是MDL-步進#checkbox_1還是因爲我升級我的組件元素，比如下面的標籤也很重要：

@ViewChild('checkbox_2') checkbox_2:ElementRef; 
@ViewChild('checkbox_3') checkbox_3:ElementRef; 
@ViewChild('checkbox_4') checkbox_4:ElementRef; 
@ViewChild('checkbox_5') checkbox_5:ElementRef; 
@ViewChild('checkbox_6') checkbox_6:ElementRef; 

componentHandler.upgradeElement(this.checkbox_1.nativeElement); 
componentHandler.upgradeElement(this.checkbox_2.nativeElement); 
componentHandler.upgradeElement(this.checkbox_3.nativeElement); 
componentHandler.upgradeElement(this.checkbox_4.nativeElement); 
componentHandler.upgradeElement(this.checkbox_5.nativeElement); 
componentHandler.upgradeElement(this.checkbox_6.nativeElement); 

我如何能實現這個？

UPDATE：

當我試圖與上述ngFor環路我得到這樣的以下內容：

Answer 1

您可以創建管道，將你的陣列分成2種元素的塊。這可能是這樣的：

chunks.pipe.ts

@Pipe({ name: 'chunks' }) 
export class ChunksPipe implements PipeTransform { 
    transform(arr: any, chunkSize: number) { 
    return arr.reduce((prev, cur, index) => (index % chunkSize) ? prev : prev.concat([arr.slice(index, index + chunkSize)]), []); 
    } 
} 

然後你就可以使用這個ChunksPipe這樣的：

component.html

<div class="mdl-grid"> 
    <div *ngFor="let chunk of hobbies | chunks: 2" class="mdl-cell mdl-cell--4-col"> 
    <label *ngFor="let hobby of chunk" #checkbox class="mdl-checkbox mdl-js-checkbox"> 
     <input type="checkbox" name="hobbies" [value]="hobby" class="mdl-checkbox__input"> 
     <span class="mdl-checkbox__label">{{hobby}}</span> 
    </label> 
    </div> 
</div> 

要升級元素，我會通過@ViewChildren獲取元素

component.ts

hobbies = ['Sport', 'Reading', 'Singing', 'Travelling', 'Movies', 'Cooking' ]; 

@ViewChildren('checkbox') checkboxes: QueryList<ElementRef>; 

ngAfterViewInit() { 
    this.checkboxes.forEach(cbx => componentHandler.upgradeElement(cbx.nativeElement)); 
} 

附：另一種方法是使用指令，它會做內部

Plunker Example

又見Grid Example