angular2在不同的网格单元中填充ngFor

我有一个数组：

爱好=[“阅读”，“运动”，“旅行”，“电影”，“烹饪”，“唱歌]

在模板中，我正在手动填充它：

<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循环时，我得到如下结果：

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

您可以创建管道，将数组拆分为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)]), []);
  }
}

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

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

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

然后你可以像这样使用这个
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>

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


另请参见
您可以创建将数组拆分为两个元素块的管道。可能是这样的：

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)]), []);
  }
}

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

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

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

然后你可以像这样使用这个
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>

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


另请参见
查看包含各种组件的模式，并了解如何将其提取到循环中。你尝试了什么不起作用？我基本上用ngFor尝试了上面讨论的相同代码，但是它填充了相同的值，而不是连续的值，在动态填充时，我不太确定如何给出类似于#checkbox_1的内容，以便升级该元素以进行适当渲染。您是否可以在teamviewer中使用？不幸的是，请不要查看带有各种组件的模式，并查看如何将其提取到循环中。你尝试了什么不起作用？我基本上用ngFor尝试了上面讨论的相同代码，但是它填充了相同的值，而不是连续的值，在动态填充时，我不太确定如何给出类似于#checkbox_1的内容，以便升级该元素以进行正确渲染。您在teamviewer中可用吗？不幸的是，不可用