角子组件视图没有得到更新

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
  }

event.component.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()))}