Angular 为什么输入字段在映射后失去对初始数组的引用？

我有以下意见：

@Input() field: LayerField;

我尝试加载数据并将此数据应用于字段：

  ngOnInit() {
        if (!this.fieldManager.fieldHasDatasource(this.field)) {
            this.fieldManager.loadSource(this.field).subscribe((source) => {
                this.field = this.fieldManager.setSource(this.field, source);
                this.fieldManager.setValue(this.field);
            });
        }
    }

问题是：

this.field = this.fieldManager.setSource(this.field, source);

在这里，我尝试使用SERVICE方法更新reference

this.field

：

setSource(field: LayerField, source: FieldSource[]): LayerField {
    const reduced = this.reduceSource(source, field.htmlInputAttr.sort_field);
    const sorted = this.sortSource(reduced);

    return { ...field, datasource: { values: sorted } };
}

private reduceSource(source: FieldSource[], sortFieldId: string) {
    return source.map((field) => {
        return {
            ...field,
            sortby: field.classifierrecordfields.find((_field) => _field.classifierfielddefinitionid === sortFieldId)?.numbervalue || 0,
        };
    });
}

sortSource(source: FieldSource[], sortOrder = 'asc'): FieldSource[] {
    return source.sort((a, b) => (sortOrder === 'asc' ? a.sortby - b.sortby : b.sortby - a.sortby));
}

为什么这种方式会丢失对输入

此字段的引用？因此，父组件看不到此映射字段

下面的代码适合我。你能解释一下原因吗？它解决了我的问题。

  if (this.type === 'select' && !this.fieldManager.fieldHasDatasource(this.field)) {
            this.fieldManager.loadSource(this.field).subscribe((source) => {
                source = this.fieldManager.setSource(source, this.field?.htmlInputAttr?.sort_field);
                source = this.fieldManager.sortSource(source);
                this.field.datasource = { values: source, loaded: true };
                this.field.value = this.field?.htmlInputAttr?.default_value;
            });
        }

服务是：

setSource(source: FieldSource[], sortFieldId: string): FieldSource[] {
    return source.map((field) => {
        return {
            ...field,
            sortby: field.classifierrecordfields.find((_field) => _field.classifierfielddefinitionid === sortFieldId)?.numbervalue || 0,
        };
    });
}

sortSource(source: FieldSource[], sortOrder = 'asc'): FieldSource[] {
    return source.sort((a, b) => (sortOrder === 'asc' ? a.sortby - b.sortby : b.sortby - a.sortby));
}

使用map时，您正在创建一个新的数组引用；使用spread操作符（…）时，您正在创建一个正在返回的新对象引用。因此，最后您有一个新的数组引用，每个项都有一个新的浅复制引用。
您可以在FieldSource模型中使用sortBy？：编号包含可选属性，而不是创建新的浅层克隆

然后像这样在地图中使用这个值

return source.map((field) => {
    field.sortby = field.classifierrecordfields.find((_field) => _field.classifierfielddefinitionid === sortFieldId)?.numbervalue || 0,
    return field;
});