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步骤#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

您可以创建将数组分成两个元素块的管道。看起来可能是这样的：

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));
}

另一种方法是使用内部执行指令。

柱塞实例

另见网格实例