显示对象模板角度，计算重复单词的数量

Question

我想显示 Object wordCounts，它存储一系列单词，其值是一个单词在字符串中重复的次数，发生的情况是我想按该单词的重复次数按顺序显示该变量有，我只想显示 20 个重复次数最多的单词。我遇到的主要问题是，就我的代码而言，它返回一个 JSON，这不允许我放入一个 div 来给它一个样式。项目详情.tsgetWordCount(str) {let arrayOfWords = str.split(/\s+/);var wordCounts = Object.create(null);for(let i = 0; i<arrayOfWords.length; i++){  let word = arrayOfWords[i];  if(!wordCounts[word]){    wordCounts[word] = 1;  }else{    wordCounts[word] ++;  }}    return wordCounts;  };项目详细信息.html <p>{{getWordCount(str) | keyvalue | json}}</p>表示[ { "key": "También", "value": 1 }, { "key": "Un", "value": 1 }, { "key": "algoritmo", "value": 1 }, { "key": "aunque", "value": 1 }, { "key": "caracteres", "value": 1 }, { "key": "cifrado", "value": 1 }, { "key": "codificados", "value": 1 }, { "key": "composición", "value": 2 }, { "key": "cualquier", "value": 1 }, { "key": "de", "value": 5 }, { "key": "descifrado", "value": 1 }, { "key": "destinatario", "value": 1 }, { "key": "en", "value": 1 }, { "key": "es", "value": 2 }, { "key": "escritura", "value": 1 }, { "key": "forma", "value": 1 }, { "key": "generados", "value": 1 }, { "key": "imprimibles", "value": 1 }, { "key": "no", "value": 1 }, { "key": "original.", "value": 1 }, { "key": "para", "value": 1 }, { "key": "persona,", "value": 1 }, { "key": "por", "value": 2 }, { "key": "puede", "value": 1 }, { "key": "que", "value": 1 }, { "key": "que,", "value": 1 }, { "key": "sentido", "value": 1 }, { "key": "sentido.", "value": 1 }, { "key": "ser", "value": 1 }, { "key": "signos", "value": 1 }, { "key": "sistema", "value": 1 }, { "key": "su", "value": 1 }, { "key": "sí", "value": 1 }, { "key": "texto", "value": 1 }, { "key": "tienen", "value": 1 }, { "key": "un", "value": 2 }, { "key": "una", "value": 3 }, { "key": "unidad", "value": 1 } ]结果我不能给它任何风格。

Answer 1

您可以将值分配给变量，删除json管道并直接在 HTML 中循环值。尝试以下

控制器

export class WordComponent {

  wordCount: any;

  getWordCount(str) {

    let arrayOfWords = str.split(/\s+/);

    let wordCounts = Object.create(null);

    for(let i = 0; i < arrayOfWords.length - 1; i++){

      let word = arrayOfWords[i];

      wordCounts[word] ? wordCounts[word]++ : wordCounts[word] = 1;

    }

    return wordCounts;  

  };

  onMouseUp(str: string) {

    this.wordCount = this.getWordCount(str);

  }

}

模板

<button (mouseup)="onMouseUp('str')">Get word count</button>

<ng-container *ngIf="wordCount">

  <p class="style" *ngFor="let word of wordCount | keyvalue">{{ word.key }} : {{ word.value }}</p>

</ng-container>

然后，您可以根据需要修改和渲染。还要注意循环条件应该是arrayOfWords.length - 1因为索引从零开始。

Answer 2

听起来您需要一个ShowWordCounts组件，它将您的对象作为一个@Input并生成相应的模板。