Question

基本上，我制作了一个只显示对象数据的通用组件。通过单击按钮发送数据。因此，通用组件在OnInit生命周期钩子中读取数据，如下所示。

  ngOnInit() {
    this.settingsService.getAllSettings().responseData()
        .subscribe(settingsStream => { this.settingsList = settingsStream.result }, (err) => {
            // Error Messages
        },
        () => {
            // Complete Messages
            this.currentSetting = this.settingsList
                .findIndex(setting => setting.configurationName === this.settingsService.selectedSetting.selectConfig);
        })
}

找到配置名称并将其与所选名称匹配后。它会在模板中显示正确的值。

<input size="150" [value]="settingsList[currentSetting].configurationName" [(ngModel)]="settingsList[currentSetting].configurationName">

但是，可以通过单击按钮更改通用组件数据。但是，因为通用组件仅在OnInit期间读取数据，所以它不会更改它显示的数据。我已经尝试过使用onChanges和doCheck生命周期钩子但是它们不允许我改变数据，因为它一直在寻找变化。

这是模板中的方法，可以通过单击按钮激活并显示组件

      <div *ngFor="let settings of settingsList">
<button class="btn btn-secondary"  
(click)="changeSection(settings.configurationName)" 
(click)="domElement='Generic'"> {{settings.configurationName}} </button>
</div>

<div *ngIf="showNewConfig">
<new-config> </new-config>

我之前使用的是单独的组件，但这似乎效率低下且代码重复。

非常感谢所有帮助！

Answer 1

我可能误解了你在寻找什么，但我不能把它放在评论中：

ngOnInit(){
      loadData()
    }

loadData(){
   this.settingsService.getAllSettings().responseData().....
}

<button (click)="loadData()">Load</button>

从另一个组件中的数据更改更新组件数据的最佳方法是什么？ Angular 2

1 个答案: