angular变更检测-模板中的局部引用变量没有及时更新

在angular中通过模板引用变量（#）访问组件/元素时，可能会存在一个问题，如下述代码，你能一眼看出来是什么错误吗？对应的angular错误码是什么？

ps：如果一眼看出来了，下面就不用看啦，毕竟是很简单的了，没看出来的话，就往下看看吧

------productList.component.html------

<h2>Product List</h2>
<ul> // 点击li元素更新productDetail组件的name属性
 <li (click)="changeSelectedProduct('Webcam')">Webcam</li>
 <li (click)="changeSelectedProduct('Microphone')">Microphone</li>
 <li (click)="changeSelectedProduct('Wireless Keyboard')">Wireless Keyboard</li>
</ul>
<span>{{product.name}}</span> // 读取productDetail组件的name属性进行显示
<app-product-detail #product [name]="selectedProduct" (bought)="OnBuy($event)"></app-product-detail>

------productList.component.html------



------productList.component.ts------

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.less']
})
export class ProductListComponent implements OnInit {

  selectedProduct = '';

  constructor() { }

  ngOnInit(): void {}

  changeSelectedProduct(name: string) {
    this.selectedProduct = name;
  }

  OnBuy(name: string) {
    window.alert(`You just bought ${name!}`)
  }

}

------productList.component.ts------

通过点击li元素去触发更改时，会发现第一次点击后预期显示一致的两个地方显示不一致，span是什么都没有显示，detail组件显示了对应li元素的name，第二次点击li元素时，span元素显示的是第一次被点击li的name，detail组件显示的是第二次li元素的name，为什么会出现这种不一致的情况呢？该如何解决呢？

报错信息：Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

原因：大致是因为product.name属性的更新是在变更检测已经发生之后发生的（有没有好心的大佬帮忙解释一下内部的原理机制啊，十分感谢！！！）

解决方法：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.less']
})
export class ProductListComponent implements OnInit {

  selectedProduct = '';

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {
  }

  changeSelectedProduct(name: string) {
    this.selectedProduct = name;
    this.cdr.detectChanges();  // 手动触发变更检测
  }

  OnBuy(name: string) {
    window.alert(`You just bought ${name!}`)
  }

}