Данные не отображаются, хотя запрос действителен

Question

У меня есть микросервис и веб-страница angular, которая выглядит как

export class FilpComponent implements OnInit {
  flipped = false;
  word: MetaWord;

  flipIt() {
    this.flipped = !this.flipped;
  }

  constructor(private breakpointObserver: BreakpointObserver, private  metaWordService: MetaWordService) {
  }

  ngOnInit() {
    this.metaWordService.read('laufen').subscribe(
      (data: MetaWord) => {
        this.word = data;
// this outputs undefined
        console.log(this.word.word);
      });
  }

  getSences(): Sens[] {
    return this.word.senses;
  }
}

, а шаблон выглядит как

<ng-container *ngIf="word !== undefined">
  <div>{{word.word}}</div>
</ng-container>

, запрос отправлен правильно, и я могу отобразить Данные в Chrome DevTools. Но вывод подписки не определен.

Это вывод console.log(data) или console.log(word)

ОБНОВЛЕНИЕ: Благодаря Николасу К это делает работать сейчас, но у меня та же проблема здесь

метод getWords () возвращает заполненный объект типа word. Объектное слово теперь будет иметь разные значения. Я хочу показать различные значения в виде элементов div следующим образом:

<div *ngFor="let word of getWords()">
  <div id="player" class="player" [class.voted]="flipped">
    <div class="front">
      <div class="grid-container">
        <h1 class="mat-h1">Dashboard</h1>
        <h1 class="mat-h1">{{word.word}}</h1>
        <div *ngFor="let example of word.senses">
          <div> here is an example of the word : {{example.sense}}</div>
        </div>

      </div>
    </div>
  </div>
</div>

объект word заполняется данными, но я ожидаю увидеть несколько элементов div

Код чтения в бэкэнд-сервисе

return this.httpClient.get<MetaWord[]>(`${environment.words.baseUrl}/${term}`);

когда я пишу тестовый метод, подобный этому

  public print(){
    this.wordList.forEach(word=>{
      console.log(word.senses.length);
    })
  }

и вызываю его после того, как данные были вызваны из бэкэнд-службы, я получаю ошибку

TypeError: Cannot read property 'length' of undefined

Как-то не правильно парсит данные к моему объекту

Answer 1

data - это массив, вам нужно сначала получить доступ к индексу, чтобы достичь нужного объекта.

Например:

console.log(this.data[0].word);

---

Внести следующие изменения:

 ngOnInit() {
    this.metaWordService.read('laufen').subscribe(
      (data: MetaWord[]) => {
        // access via an index
        console.log(this.data[0].word);
      });
 }

при условии, что ваша модель MetaWord была определяется в соответствии с ответом, представленным в вопросе.