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来填充这些复选框，但保持结构完整，即将备用值插入到连续的单元格中，例如：

<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-stepper #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);

我该如何实现？

更新：

当我尝试上述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));
}

PS替代方法是使用将在内部执行的指令

柱塞示例

另请参见网格示例