angular - 变量值在特定情况下没有更新角度？

Question

我dropdown在angular应用程序中有一个自定义，其 html 是这样的

<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="wrap-drop" id="noble-gases">
    <span>{{selectedCategory}}</span>
    <ul class="drop">
        <li (click)="getReferralsOnSelectChanged()"><a>All Categories</a></li>
        <li *ngFor="let category of categories" (click)="categorySelectionChanged(category)"><a>{{category.name}}</a></li>
    </ul>
</div>

我正在像这样selectedCategory在我的函数中更改变量的值component.ts

selectedCategory: string = 'All categories';

getReferralsOnSelectChanged = () => {
    console.log('in all categories')
    this.selectedCategory = 'All categories';
    this.getReferrals();
}

categorySelectionChanged = (cat) => {
    console.log('change : ', cat)
    this.selectedCategory = cat.name;
    console.log('selected category : ',this.selectedCategory)
    if (cat._id) {
        this._dataService.get(`${this._const.companySearch}/${cat._id}`).subscribe(res => {
            console.log('category search response : ', res);
            if (res.success) {
                this.referralLinkArr = res.data ? res.data : [];
                this.masterReferralLinkArr = res.data ? res.data : [];
            }
        }, error => {
            console.log('Search Category By referral Error : ', error);
        })
    } else {
        this.getReferrals();
    }
}


getReferrals = () => {
    this.showLoader = true;
    this._dataService.get(`${this._const.companyReferrals}`).subscribe(res => {
        if (res.success) {
            this.masterReferralLinkArr = res.data;
            this.referralLinkArr = res.data;
        }
        this.showLoader = false;
    }, error => {
        console.log('get Referral Error : ', error)
        this.showLoader = false;
    })
}

问题是，当我单击模板跨度中更新的类别名称dropdown以外的任何类别名称时。但是，当我单击时，然后当我更改为任何其他类别名称时，它不会在模板中更新值。All Categories<span>{{selectedCategory}}</span>All Categoriesdropdown<span>{{selectedCategory}}</span>

请在此处参考错误视频

标签： angulartypescript