Angular представление дочернего компонента не получает обновления

Question

У меня есть три компонента в следующей структуре. При попытке обновить свойство объекта не отражается в представлении. Не могли бы вы помочь мне, в чем причина этого.

app.component. html

<app-event (myNewFun)="sortList()" [myChild]=journey.course></app-event>

app.component.ts

 this.store$.pipe(select(selectObjectJourney), takeWhile(() => this.componentActive)).subscribe((result: Journey) => {
          this.journey = result;
        });
-----------
sortList() {
    this.journey.course = //doing some operation and updating the journey object but not getting reflect
  }

. компонент. html

<app-child [myChildInside]="myChild"></app-child>
<button (click)="myFun()">Sort</button>

event.component.ts

@Input() myChild;
  @Output() myNewFun = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  myFun() {
    this.myNewFun.emit();
  }

child.component. html

<ul *ngFor="let item of myChildInside">
  <li>{{item.name}} --- {{item.mark}}</li></ul>

child.component.ts

@Input() myChildInside;

Answer 1

Изменение обнаружения не сработало в компоненте При изменении значения объекта. Чтобы активировать обнаружение изменений, вы изменяете ссылку следующим образом

Попробуйте:

this.journey = { ...this.journey, course: this.journey.course.sort(sortPredicate('title', false, (title: string) => title && title.toLowerCase()))}