工具栏视图在其数据更改时不会更改？

Question

这是我的示例代码： stackblitz demo

加价：

<div>
  <ejs-toolbar #element>
    <e-items>
      <e-item *ngFor="let item of newarray; let i = index" [text]="item.text" [tooltipText]="item.text">
      </e-item>
    </e-items>
  </ejs-toolbar>
</div>

<div>
  <div style="margin-top: 5px">
    <button style="margin-right: 5px" (click)="run()" type="submit">add</button>
  </div>
</div>

<div>
   <pre>newarray: {{ newarray | json }}</pre>
</div>

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newarray = [
    { text: "Cut"}
  ]

  run() {
   this.newarray = [
     { text: "Paste" },
    { text: "Underline" },
    { text: "Italic" }]
  }
}

这是我的工具栏组件。它是通过 *ngfor 渲染的。如果我更改它的数据，工具栏视图不会更新，但数据会发生变化。

我不知道，如何解决这个问题？

请为此提供合适的解决方案。谢谢

Answer 1

尝试这样的事情：

Use ToolbarComponent

演示版 -----> Solution

TS:

import {
  Component, OnInit, ViewChild, ElementRef
} from '@angular/core';

import { ToolbarComponent } from '@syncfusion/ej2-ng-navigations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('element') el: ToolbarComponent;
  newarray: Array<any>;

  ngOnInit() {
    this.newarray = [
      { text: "Cut" },
      { text: "Copy" },
      { text: "Paste" },
      { text: "Underline" },
    ]
  }

  run() {
    let ummy: Array<any> = [
      { text: "Paste" },
      { text: "Underline" },
      { text: "Italic" }]
    this.el.items = ummy
  }
}

工具栏视图在其数据更改时不会更改？

Toolbar view is not changed when its data changed?

html

toolbar

typescript

angular