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

尝试这样的事情：

使用 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
  }
}

数据更改后，工具栏视图也不会改变吗？

1 个答案: