如何使用 *ngFor 和 *ngIf 显示一次 h2

Question

我有一个由 2、3、4、5 等字母单词组成的单词数组。 我使用 ng-For 遍历数组并使用 ng-if 根据字母数量显示单词，但我似乎无法获得标题来分隔它们

预期结果

2 个字母的单词 成为.......

3 个字母的单词 蜜蜂之罪.......

等等，

这就是我目前所拥有的

<div *ngIf="data">
  <h2 class="title">{{data.letters}}</h2>
  <ul class="wordList" *ngFor="let item of data.word">
      <li *ngIf="item.length ==2">{{item}}</li>
      <li *ngIf="item.length ==3">{{item}}</li>
      <li *ngIf="item.length ==4">{{item}}</li>
      <li *ngIf="item.length ==5">{{item}}</li>
      <li *ngIf="item.length ==6">{{item}}</li>
      <li *ngIf="item.length ==7">{{item}}</li>
      <li *ngIf="item.length ==8">{{item}}</li>
      <li *ngIf="item.length ==9">{{item}}</li>
      <li *ngIf="item.length ==10">{{item}}</li>
      <li *ngIf="item.length ==11">{{item}}</li>
      <li *ngIf="item.length ==12">{{item}}</li>
      <li *ngIf="item.length ==13">{{item}}</li>
      <li *ngIf="item.length ==14">{{item}}</li>

    </ul>
</div>

我知道我还应该使用索引来遍历大小的单词，之后我会说：)

Answer 1

利用Pipe 将单词数组转换为一个对象，其key 是单词的长度，其values 是单词本身。

@Pipe({ name: 'groupByWordsPipe' })
export class GroupByWordsPipe implements PipeTransform {

    transform(input: []) {
        let map = {};
        input.forEach((e: string) => {
            if (map[e.length]) {
                map[e.length] = map[e.length] + ' ' + e;
            } else {
                map[e.length] = e;
            }
        });
        return map;
    }

}

现在您可以通过以下语法轻松地在模板上使用它：

<div *ngFor="let word of words | groupByWordsPipe | keyvalue">
    <h2>{{word.key}}</h2> letter words : {{word.value}}
</div>

Answer 2

我认为你必须在你的类中处理按长度分组部分，并构建一个合适的对象结构来包含你想要显示的数据。另请注意，由于您有组列表（按字长）以及每个组的字列表，您实际上需要两个嵌套*ngFor 声明。

在你的课堂上：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  private words = ['the', 'to', 'am', 'as', 'bee', 'sin', 'other'];
  groupedByLength: { length: string, words: string[] }[] = [];

  ngOnInit() {
    this.groupByLength();
  }

  private groupByLength() {
    let grouped = {};
    for(let word of this.words) {
      const length = word.length;
      if(!grouped[length]) {
        grouped[length] = [word];
      } else {
        grouped[length].push(word);
      }
    }
    Object.keys(grouped).forEach(key => {
      this.groupedByLength.push({ length: key, words: grouped[key] });
    });
  }
}

在您的模板中：

<div *ngFor="let data of groupedByLength">
    <h2>{{ data.length }} letter words:</h2>
    <ul>
        <li *ngFor="let word of data.words">{{ word }}</li>
    </ul>
</div>