尽管请求有效，但不显示数据

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) 的输出

更新：感谢 Nicholas K，它现在可以正常工作，但我在这里遇到了同样的问题

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>

单词对象填充了数据，但我希望看到多个 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 已根据问题中的响应定义。