相关疑难解决方法(0)

为什么这个组件在这个简单的插件中

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

投掷:

例外:App @ 0:5'中的表达式'我'{{message}}在检查后发生了变化.上一个值:'我正在加载:('.当前值:'我已经完成了加载:)'在[我是{{message}}在App @ 0:5中]

什么时候我正在做的是在我的视图启动时更新一个简单的绑定？

我从确切的示例“具有排序、分页和过滤功能的数据表”开始。这里https://material.angular.io/components/table/examples 它工作正常。但是现在我想在没有表格的情况下使用分页器，所以我在 html 文件“< mat-table ... < /mat-table>”中简单地替换为：

<div *ngFor="let row of dataSource.connect() | async" >
{{ row.id }} {{ row.name }} {{ row.progress }} {{ row.color }} <br>
</div>

但它不能正常工作，因为看起来：

• connect() 在启动时运行多次
• 只需悬停分页器箭头即可使其再次运行多次
• 在过滤器中输入一个字母做同样的事情

我想这不是正确的方法。

最后，我想重用相同的方法来显示卡片，带有过滤器和分页器。

TIA 寻求任何帮助。

J.P

我把代码放在这里：https : //angular-6q44a4.stackblitz.io 我添加了一些console.log来显示发生了什么（不是在stackblitz上）但这里是一个例子：

只需悬停箭头然后单击，就可以看到许多渲染数据。

而相同的代码但有一个表，它按预期工作：

我用 mini-fab 按钮从零一个分页器重新创建，灵感来自http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google 的一些代码，添加几个过滤器，它工作正常:)