показать шаблон объекта angular, который считает количество повторяющихся слов

Question

Я хочу показать объект wordCounts, который хранит серию слов со значением, равным количеству повторений слова в строке, что происходит, когда я хочу показать эту переменную по порядку по количеству повторения этого слова, и я просто хочу показать 20 самых повторяющихся слов. Основная проблема, с которой я столкнулся, заключается в том, что, поскольку у меня есть код, он возвращает JSON, что не позволяет мне вставить div для придания ему стиля.

project-details. ts

getWordCount(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 и l oop значение непосредственно в 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>

Затем вы можете изменять и визуализировать в соответствии с вашими пожеланиями sh. Также обратите внимание, что условие l oop должно быть arrayOfWords.length - 1, поскольку индекс начинается с нуля.

Answer 2

Похоже, вам нужен компонент ShowWordCounts, который принимает ваш объект за @Input и генерирует соответствующий шаблон.