typescript 通过ngmodel从子组件Angular 更新对象数组

ldioqlga 于 2023-01-14 发布在 TypeScript

关注(0)|答案(1)|浏览(143)

我对React要熟悉得多，我的问题似乎相当普遍。
首先，我有一个TreeDataStructure类，在这个类中，我有一个“filters”属性，它保存应用于内存中树的过滤器。
树存储在组件A的属性中。我将树的“filters”属性传递给组件B，即组件A的子组件。
此子组件逐个显示所有筛选器，而组件C（B的子组件）显示单个筛选器并允许对其进行修改。
我担心的是无法将过滤器更改从C传递到组件A中存储的TreeDataStructure类。
下面是我的代码的要点：
TreeDataStructure.ts

export class DataTreeStructure {
    filters: Filters;
}

type Filters = {
    items: Array<Filter>
    linkOperator: LinkOperator //and or or
}

type Filter = {
    column: string
    operator: string
    comparaisonValue: string
}

组分A

export class ComponentA {
    tree: DataTreeStructure
}

组件A模板

<component-b filters[tree.filters]></component-b>

构成部分B

export class ComponentB {
    @Input() filters: Filters;
}

组件B模板

<ng-container *ngFor="let item of filters.items; let index = index;">
    <component-c
        [column]="filters.items[index].column"
        [operator]="filters.items[index].operator"
        [comparaisonValue]="filters.items[index].comparaisonValue"
    >
    </component-c>
</ng-container>

构成部分C

export class ComponentC {
    @Input() column: string;
    @Input() operator: string;
    @Input() comparaisonValue: string;
}

组件C模板

<input [(ngModel)]="column"/>
    <input [(ngModel)]="operator"/>
    <input [(ngModel)]="comparaisonValue"/>

你会怎么做？

typescript

来源：https://stackoverflow.com/questions/75095208/update-an-object-array-via-ngmodel-from-a-child-component-angular

1条答案

按热度按时间

qojgxg4l1#

要从组件C更新TreeDataStructure类的filters属性，可以使用Input和Output装饰器的组合。
在组件C中创建一个Output事件发射器，以发射更新的过滤器值。

@Output() filterChanged = new EventEmitter<Filter>();

在组件C的模板中，当筛选器值更改时发出事件。

<input [(ngModel)]="column" (ngModelChange)="emitFilterChanged()"/>
<input [(ngModel)]="operator" (ngModelChange)="emitFilterChanged()"/>
<input [(ngModel)]="comparaisonValue" 
(ngModelChange)="emitFilterChanged()"/>

在Component C类中，创建一个方法以使用更新的筛选器值发出事件。

emitFilterChanged() {
  this.filterChanged.emit({
    column: this.column,
    operator: this.operator,
    comparaisonValue: this.comparaisonValue
  });
}

在组件B中，创建一个方法来处理filterChanged事件并更新TreeDataStructure类的filters属性。

handleFilterChanged(filter: Filter, index: number) {
   this.filters.items[index] = filter;
}

trackByFn(index: any, item: any) {
   return index;
}

在组件B的模板中，将筛选器的索引和handleFilterChanged方法传递给组件C，并将filterChanged事件绑定到handleFilterChanged方法。

<ng-container *ngFor="let item of filters.items; let index = index; trackBy:trackByFn">
  <component-c
    [column]="filters.items[index].column"
    [operator]="filters.items[index].operator"
    [comparaisonValue]="filters.items[index].comparaisonValue"
    (filterChanged)="handleFilterChanged($event, index)"
  >
  </component-c>
</ng-container>

通过使用此方法，您现在可以从组件C更新TreeDataStructure类的filters属性，并且更改将反映在组件A中。
与TrackBy Angular可以跟踪哪些项目已添加（或删除）根据唯一标识符，并创建或销毁只有改变的东西，这意味着你不会失去对输入字段的重点：）

赞(0）回复(0）举报 2023-01-14

我来回答

typescript 通过ngmodel从子组件Angular 更新对象数组

1条答案

相关问题

热门标签

最新问答