angular - 如何在 Nebular User Angular 组件中动态设置数据

Question

我正在使用 Nebular-User Angular UI 组件及其工作，但我想动态设置 name 属性。

 <nb-user size="large"
             name="John Doe"
             title="Engineer"
             badgeText="99+"
             badgeStatus="success"
             badgePosition="bottom right">
 </nb-user>

如何动态设置 name="John Doe"。

标签： angularnebular

Answer 1

您可以将属性绑定到控制器中的变量。尝试以下

控制器

export class AppComponent {
  name = "John Doe";

  constructor() {
    setTimeout(() => { this.name = "Michael Wolfgang" }, 3000);   // <-- change `name` after 3 sec
  }
}

模板

<nb-user 
  size="large"
  [name]="name"    <!-- bind here to the `name` variable from controller -->
  title="Engineer"
  badgeText="99+"
  badgeStatus="success"
  badgePosition="bottom right">
</nb-user>

工作示例：Stackblitz