无法在Angular组件的HTML文件中读取变量。

12 浏览
0 Comments

无法在Angular组件的HTML文件中读取变量。

我试图在chat.component中显示一个数组的数据..

public matchesList = [];
loadMatches() {
...
    if (result.success) {
      this.matchesList = result.matches_list.split(',');
      console.log(this.matchesList);
    }
}

..在chat.component.html中..

{{match}}

..但没有成功！

console.log()向我展示数组已经正确地被填充：(3) ["3", "5", "6"]。

loadMatches()被从另一个组件home.component中调用..

import { ChatComponent } from '../chat/chat.component';
@Component({
  providers: [ChatComponent],
  ...
})
loadChatViewData() {
    this.chatComp.loadMatches();
}

为什么matchesList的数据在chat.component.html中无法访问？

谢谢！

0

1 答案

0 Comments

这是因为您在调用this.chatComp.loadMatches()时使用的实例与用于渲染以下模板的实例不同 - 

chat.component.html
<div class="matchesList" *ngFor="let match of matchesList">
    <p>{{match}}</p>
</div>

您使用了providers: [ChatComponent]，这将为您提供一个与用于渲染的实例不同的实例。

如果您能够分享以下组件的html/.ts文件以及将组件放置在UI中的代码[html]，我们将能够更好地帮助您 -

1. Chat Component.ts/.html
2. Home component.ts/.html
3. 父组件[如果有的话]，用于包含这两个组件[如果没有，请告诉我们如何渲染它们[即父/子关系?]]

0