Question

我的*ngFor不会在Value Change上更新。我的相关代码：

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);
}

Answer 1

注释部分有很多不错的问题，很多人认为代码应该可以工作。是的，确实如此。

但是我的同事中有人将ChangeDetectionStrategy更改为onPush ...

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

* ngFor不会随着价值变化而更新

1 个答案: