Проблема с получением данных в выпадающем списке Angular

Question

Я пытаюсь заполнить раскрывающийся список из get API. Я создал сервис и с помощью наблюдаемых возвращаю данные компоненту, который затем подписывается на сервис. Я могу получить данные, но они отражаются в выпадающем меню, только когда я щелкаю один раз за пределами выпадающего меню. Данные поступают мгновенно в console.log, когда страница обновляется sh, но раскрывающийся список получает данные только тогда, когда я щелкаю где-то за пределами раскрывающегося списка. Я пытался прочитать много сообщений, касающихся раскрывающегося списка, но не смог решить эту проблему. Мой код ниже, поведение остается тем же, если я удаляю предложение (change)=selectedHandlerProjectId($event):

sample.component. html

<div class="form-group">
 <label>
   <h3>Select ProjectName</h3>
 </label>
 <select (change)=selectedHandlerProjectId($event) ngModel="selectedProjectName" class="form-control">
     <option *ngFor="let Project of ProjectDetails" >{{Project.ProjectName}}</option>
 </select>
</div>

sample .component.ts

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class sampleComponent implements OnInit {

  public ProjectDetails: TestProject[] = []; 

  constructor(private route:ActivatedRoute,
    private projService:projectService) { }

    getSelectedProject(): void{  
      this.projService.generateProjectList().subscribe(
        projectDetails => {
          this.projectDetails = projectDetails;
          console.log(this.projectDetails);
        }  
      );
    }


  //methods to get dropdown values
  dropDownProjectId: string = '';
  selectedHandlerProjectId(event : any)
  {
    if(event.target.value != 'default') { 
      this.dropDownProjectId = event.target.value;}
    else {this.dropDownProjectId = null;}
  }

  ngOnInit() {
    this.getSelectedProject();
  }

sample.service.ts

import { Injectable } from '@angular/core';
import {ServiceConstants} from "../../shared/service-constants";
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {TestProject} from "../models/model.component";

@Injectable({
  providedIn: 'root'
})
export class projectService {

  rootUrl: string = `${ServiceConstants.project_URL}/test-project-manager`;

  constructor(private authHttp: HttpClient) {
  }

  generateProjectList(): Observable<any> {
    return this.authHttp.get<Array<TestProject>>(`${this.rootUrl}/testprojects`);  
  }

}

Answer 1

При использовании changeDetection: ChangeDetectionStrategy.OnPush Angular необходимо знать, когда вы обновили поле в классе.

Поэтому, когда вы устанавливаете this.projectDetails = projectDetails; angular, он не знает, что projectDetails сейчас содержит ваши данные.

constructor(private route:ActivatedRoute, private cdr: ChangeDetectorRef, private projService:projectService) { }

    getSelectedProject(): void{  
      this.projService.generateProjectList().subscribe(
        projectDetails => {
          this.projectDetails = projectDetails;
          this.cdr.detectChanges();
          console.log(this.projectDetails);
        }  
      );
    }

Чтобы angular обнаружил ваши изменения в компоненте, вы импортируете ChangeDetectorRef и вызовите функцию receiveChanges () для него.

Answer 2

Это связано с changeDetection: ChangeDetectionStrategy.OnPush

Удалите эту строку и все будет работать или

Измените

 public ProjectDetails: TestProject[] = [];

ДО

public ProjectDetails: Array<TestProject>;

Значения без какого-либо значения по умолчанию;

Или

this.projectDetails = projectDetails;
this.projectDetails = this.projectDetails.slice();

Таким образом this.projectDetails ссылается на другой экземпляр массива и Angular распознает изменение.