Question

我有一个从API获取数据的服务。我有一个使用此服务的组件。

数据到来后，它会在messages []变量中存储消息数组。然后在视图中我执行ngFor循环来遍历对象并显示数据。这一切都运行正常，但我还有另一个功能，当用户点击按钮时触发，此功能使用相同的服务，但传递不同的参数，因此返回不同的结果，然后它应更新messages []变量并更新视图。 / p>

但是应用程序崩溃的问题我不知道为什么，它不会更新消息[]。那么如何在调用函数时更新相同的变量并在视图中显示更改？

这是我的服务：

//returns all messages from API passing pagenumber and how many results to return
getAllMessages(page: number, numberOfRows: number): Observable<any> {
    return this.http.get('/api/messages?offset=' + page + '&batchsize=' + numberOfRows).map(data => data)
}

所以在我的组件中：

   messages: any[];

    ngOnInit() {

       setDefaultPageLoad(pageOffset: number) {
    this.messageService.getAllMessages(pageOffset, 25).subscribe(data => {
       this.messages = data.messages,

    }

         }
      otherFunction(){
          this.messageService.getAllMessages(pageOffset, 12).subscribe(data => {
       this.messages = data.messages,

       }

    })

视图

<button (click)="otherFunction()">Update<button> //Once clicked should update
   <div *ngFor="let message of messages">
     {{message.name}}
   </div>

Answer 1

您在 "

中缺少 ngFor

 <div *ngFor="let message of messages">
     {{message.name}}
   </div>

功能也应该有paranthesis（）

(click)="otherFunction()"

服务和视图

1 个答案: