Индивидуальное обновление свойства и повторное назначение объекта в угловых

Question

У меня есть такой объект.

steps:any = [
    {
        id: 1, name: "A", next: [{ id: 2, name: "B" }, { id: 3, name: "C" }]
    },
    {
        id: 2, name: "B", next: [{ id: 1, name: "B" }]
    },
    {
        id: 3, name: "C", next: [{ id: 1, name: "B" }]
    },
    {
        id: 4, name: "D", next: [{ id: 1, name: "B" }]
    }
]

и в HTML

<div *ngFor="let step of steps">
    {{step.name}}
    <div *ngFor="let nextStep of step.next">
        <span (click)="change(step,nextStep)">{{nextStep.name}}</span>
    </div>
</div>

и тс

change(step, nextStep) {
    let __step = this.steps.find((_step) => {
        return _step.id === step.id;
    });

   let __nextStep = __step.next.find((_nextStep) => {
     return _nextStep.id === nextStep.id;
   });
   __nextStep = {name:"XYZ",id:"10",next:[]}
}

В соответствии с этим объект, по которому щелкнули, должен изменить свое значение? Что это не работает, name остается прежним, но если я делаю

__nextStep.name ="XYZ";

это работает, но если назначить объект не работает. Я что-то упустил?

Answer 1

Это потому, что ваш объект является новой ссылкой на память.

Когда вы пишете

__nextStep = {name:"XYZ",id:"10",next:[]}

Вы создаете новую ссылку на память, которая не имеет ничего общего с предыдущим значением, и угловые циклы ищут изменения в ссылках на память, которые вы предоставляете при запуске.

Это означает, что, поскольку ваша новая ссылка на память находится вне массива, Angular не меняет ее.

Если вы хотите иметь возможность назначать новые ссылки на память и по-прежнему проверять изменения, вам придется написать собственную функцию trackby, которая отслеживает по имени.

<div *ngFor="let step of steps; trackBy: customTB">

customTB(index, item) {
  return `${index}-${item.name}$`;
}

Вы также можете попробовать с

<div *ngFor="let step of steps; trackBy: step.name">

Но я никогда не проверял это сам.

Answer 2

Вы обновляете только локальное значение, чтобы обновить значение, необходимое для поиска индекса из массива, как это

change(step, nextStep) {
    let __stepIndex = this.steps.findIndex((_step) => {
    _step.id === step.id;
    });
    let __nextStepIndex =this.steps[__stepIndex].next.findIndex((_nextStep) => {
  _nextStep.id === nextStep.id;
});
__nextStep = {name:"XYZ",id:"10",next:[]};
this.steps[__stepIndex].next[__nextStepIndex]=__nextStep;
}

Answer 3

__nextStep - это просто локальная переменная, которая изначально содержит ссылку на элемент steps. Когда вы переназначаете его с помощью:

__nextStep = {name:"XYZ",id:"10",next:[]};

вы ничего не делаете с исходным объектом. Присвоение переменной не влияет на объект, на который ранее ссылалась переменная.

Вы можете использовать Object.assign() для замены свойств существующего объекта:

Object.assign(__nextStep, {name:"XYZ",id:"10",next:[]});