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访问不同的对象？

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);
}

Answer 2

由于不需要事先知道索引，我最终使用以下代码更新了所有值：

public updateArrayElement(formControlValue, element, newValue) {
    this.index = this.compInfos.findIndex(x => x.formControlName === formControlValue);
    this.compInfos[this.index][element] = newValue;
}

Answer 3

您无法更新父组件。但是，您可以将事件发送给父级。在您的子组件中，添加

@Output() update = new EventEmitter<CompInfo>();

要更新对象，请发出一个事件：

this.update.emit({ ...new_values })

您应在父组件中定义对象：

public firstCompInfo: CompInfo = {
  guid: '820E04E0-8084-4D9C-A268-D8C0D21E74F6',
  width: '350px',
  placeHolder: ' -- Select --',
  fieldText: 'Social Media 1',
};

然后听模板中的update事件：

<app-ig-dropdown
  formControlName="combo1"
  [compInfo]="firstCompInfo"
  (update)="firstCompInfo = $event">
</app-ig-dropdown>

CompInfo的定义如下：

interface CompInfo {
  public guid: string;
  public width: string;
  public placeHolder: string;
  public fieldText: string;
}

Answer 4

确定，经过更多研究和研究，我找到了一种更简单的方法。

在父级中声明@ViewChild

  @ViewChild('combo1', { static: true }) combo1: IgDropDownComponent;
  @ViewChild('combo2', { static: true }) combo2: IgDropDownComponent;

然后我可以通过

获取孩子的信息

  console.log(this.combo2.compInfo)

如果我想在对象中设置一些元素

  this.combo1.compInfo.fieldText = 'Set Media 1';
  this.combo2.compInfo.fieldText = 'Set Media 2';

不需要索引或尝试为控件找到值。只需访问该元素即可直接获取该值或从父级对其进行更新。

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

4 个答案: