無法在Angular中讀取組件的html文件中的變量

Question

我正在嘗試顯示數組的數據（填充在chat.component ）。

public matchesList = [];

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

chat.component.html ..

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

..沒有任何運氣！

console.log()向我顯示該數組已正確填充： (3) ["3", "5", "6"] 。

從另一個組件home.component ..中調用loadMatches() 。

import { ChatComponent } from '../chat/chat.component';

@Component({
  providers: [ChatComponent],
  ...
})

loadChatViewData() {
    this.chatComp.loadMatches();
}
<a class="nav-link" (click)="loadChatViewData()"></a>

為什么不是matchesList的數據訪問chat.component.html ？

謝謝！

Answer 1

發生這種情況是因為您用來調用this.chatComp.loadMatches()的實例與用於渲染以下模板的實例不同-

chat.component.html

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

您已經使用了providers: [ChatComponent] ，它將為您提供與用於渲染的實例不同的實例。

如果您可以共享以下組件的html / .ts文件以及將組件放置在用戶界面中的代碼[html]，我們將為您提供進一步的幫助-

1. Chat Component.ts/.html
2. Home component.ts/.html
3. The parent [if any] which holds those two components [If not then let us know how those are rendered [i.e. Parent/Child?]