*ngFor 不更新值变化答案

【问题标题】：*ngFor doesnt update on Value Change*ngFor 不更新值变化
【发布时间】：2019-08-11 18:18:25
【问题描述】：

我的*ngFor 不会在值更改时更新。我的相关代码：

chat.component.html

<div *ngFor="let contact of contactList; let i = index;">
    {{contact.name}}
</div>

chat.component.ts

export class ChatComponent implements OnInit {
    public selectedTeamId: string;
    constructor(
        private apiClientService :ApiClientService,
        private teamService: SetTeamService
    ){ 
         this.teamService.teamIdChange.subscribe(value => {
            this.selectedTeamId = value;
            this.apiClientService.getAPIObject(param, "chat-room-list").then((data) => {
                 this.contactList = data.response_payload.contacs;
            });
        });
     }
 }

setTeam.service.ts

export class SetTeamService {
    public teamId:string = '';
    teamIdChange: Subject<string> = new Subject<string>();
    constructor( ) {
        this.teamIdChange.subscribe((value) => {
            this.teamId = value;
            sessionStorage.setItem('teamId',value);
        });
    }

    setTeamId(teamId){
       this.teamIdChange.next(teamId);
    }
}

应该执行以下步骤：

使用新值调用设置团队 ID 函数
应通知构造函数中的订阅
组件使用新参数启动 GET Api 调用
模板中的 *ngFor 应该遍历 contactList 中的新值

第 1、2 和 3 步正在运行。我从我的 API 和 contactList 更新中获取值。

遗憾的是第 4 步不起作用。模板不会对值更改做出反应或重新呈现。通常我在 NgOnInit 上做这些事情，它就是这样工作的。但这次我需要订阅服务价值。

编辑：

来自 API 响应的值：

{
    "status": {
        "statusCode": 0,
        "statusMessage": "OK"
    },
    "response_payload": {
        "contacs": [
            {
                "id": "0c9d8efc-fc8a-42fc-80d8-64532679df48",
                "crm_account": "d9eec698-80d2-4976-8b79-9a900737848a",
                "name": "XXX",
                "email": "XXX",
                "deleted": "0",
                "update_date": "2019-07-25 05:05:48",
                "create_date": "2019-07-25 05:05:48",
                "hasChat": false
            },
            {
                "id": "885c2c11-cd5b-461c-b6dd-efdf4e21966d",
                "crm_account": "6615b728-c484-4f94-bc74-b214fab2a9e3",
                "name": "YYY",
                "email": "YYY",
                "deleted": "0",
                "update_date": "2019-08-02 15:02:15",
                "create_date": "2019-08-02 15:02:15",
                "hasChat": "1234"
            }
        ]
    }
}

navbar.component.html

<a *ngFor="let mandant of mandanten;let i=index;" class="dropdown-item" (click)="selectedTeam = mandant.name; setTeamId(mandant);">

navbar.component.ts

setTeamId(team) {
  let teamId = team['team_id'];
  this.teamService.setTeamId(teamId);
}

【问题讨论】：

你的代码看起来不错，应该可以工作，但我认为这里的错字data.response_payload.contacs，可能应该是data.response_payload.contacts
@VivekDoshi 不错，但这不是问题所在。我的 Rest API 响应中有一个拼写错误，它是 contacs，而不是 contacts。需要在我的下一个后端部署中修复它，但在这里没关系
请提供data.response_payload.contacs 的输出，你在那里做什么？
请确认您正在获得更新的响应`this.contactList = data.response_payload.contacs;`，其中包含控制台日志及其与您在html中看到的不同。
看起来您的 navcomponent 在组件订阅服务主题之前调用了 setTimeId 方法。由于 Subject 的性质，如果在订阅后发送值，它会向所有订阅者发出值。您可以尝试将主题更改为 BehaviorSubject。

标签： angular

【解决方案1】：

评论部分有很多很好的问题，并且很多人建议代码应该可以工作。是的。

但我同事的某个人将ChangeDetectionStrategy 更改为onPush ...

https://angular.io/api/core/ChangeDetectionStrategy

【讨论】：