angular - 访问和修改父组件中的对象

Question

如何更新从父级传递给子级的特定对象。例如，在我的父模板中，我有 2 个这样定义的子模板。

<app-ig-dropdown
       [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 1'}"
        formControlName="combo1"
        >
</app-ig-dropdown>
<app-ig-dropdown
        [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 2'}"
        formControlName="combo2"
>
</app-ig-dropdown> 

问题是，我现在如何更新组件文件中的值。我希望能够访问读取和修改它的 compInfo 对象，以及如何根据 formControleName 访问不同的对象？

标签： angulartypescript

Answer 1

请看一下。

在你的 tmpl 上：

<div *ngFor="let compInfo of combInfos; let i = index;" [attr.data-index]="i">
    <app-ig-dropdown
       [compInfo]="compInfo"
       (update)=updateCompInfo(i)
    >
    </app-ig-dropdown>
</div>

在 app-ig-dropdown.ts 上：

@Output() update: EventEmitter<void>;

//in some function

this.update.emit();

在你的 ts 上：

//compInfo 类

class CompInfo {
  public guid: string;
  public width: string';
  public placeHolder: string;
  public fieldText: string;
}

//////////////////////

public compInfos: Array<CompInfo> = [
 {
  guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
  width:'350px',
  placeHolder: ' -- Select --',
  fieldText:'Social Media 1'
 },
 {
  guid :'820E04E0-8084-4D9C-A268-D8C0D34E74F6',
  width:'350px',
  placeHolder: ' -- Select --',
  fieldText:'Social Media 2'
 }
]

public getCompInfo(guid): CompInfo {
  return this.compInfos.find(c => c.guid === guid);
}

public setCompInfo(compInfo): void {
 this.compInfos = this.compInfos.filter(c => c.guid!== compInfo.guid);
 this.compInfos.push(compInfo);
} 

//example function
public updateCompInfo(index): void {
 let compInfo: CompInfo = this.compInfos[index]; 
 compInfo.width = '100px';
 this.setCompInfo(compInfo);
}