when i push select2OptionData object in an array, select2 don't display any value

Question

select2 in my angular project. I want to display a select of an array of certificate requested from an api. For each element if I create and push a select2OptionData Object in an array, but when i want to display it in the Html page it is selected but without any option. When i create an array of object like the gitHub demo everything's right. Can you help me please.

Here is the ts

export class DashboardCvComponent implements OnInit, OnDestroy {

  certificateForm: FormGroup;
  certificates: Array<Certificate>;
  certificatesTypes: Array<Select2OptionData>;
  exampleData: Array<Select2OptionData>;


  constructor(private formBuilder: FormBuilder, private certificatesService: CertificatesService,
              private trainingsService: TrainingsService, private authService: AuthenticationService,
              private datepipe: DateFormatPipe, private CvService: CVService, private fileUploaService: FileUploadService) {

    this.certificatesTypes = [];
    this.exampleData = [];
   }

  ngOnInit() {

  // get certificate types
    this.certificatesService.getAllCertificatesType('50').subscribe(
      (response) => {
      // console.log('-> CERTIFICATES TYPES LOADING successful : ', response);
      /* this.certificatesTypes = response.data; */
      response.data.forEach(element => {
        const certif = {id: element.id.toString(), text: element.name};
        this.certificatesTypes.push(certif);
      });
      this.exampleData = [{
        id: 'basic1',
        text: 'Basic 1'
      },
      {
        id: 'basic2',
        disabled: true,
        text: 'Basic 2'
      },
      {
        id: 'basic3',
        text: 'Basic 3'
      },
      {
        id: 'basic4',
        text: 'Basic 4'
      }]
      console.log('les certif', this.exampleData, this.certificatesTypes);
      },
      (error) => {
       console.log('-> CERTIFICATES TYPES LOADING failed : ', error);
      },
      () => {
      }
    ); 

and the html

<div class="dashboard--degrees">
    <app-certificate *ngFor="let certificate of certificates" [certificate]=certificate [url]=url></app-certificate>
    <button class="button button--bluegreen" type="button"  data-modal="modal-certificate">
      <svg class="icon icon-plus-o">
        <use xlink:href="#icon-plus-o"></use>
      </svg> <span  i18n="@@cvcomponent-addcertificate">J'ajoute un diplôme </span>
    </button>
    <select2 [data]="certificatesTypes"></select2>
    <select2 [data]="exampleData"></select2>
</div>

Here the exampleData select display well but not the certificatesTypes

Answer 1

Don't use this.certificate.push inside for loop. it will not work. instead of you can use something like :

   let arrCertificates = [];
    response.data.forEach(element => {
           const certif = {id: element.id.toString(), text: element.name};
           arrCertificates.push(certif);
         });
   this.certificatesTypes = arrCertificates;