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

Raj singh · Accepted Answer · 2020-02-12 15:04:28Z

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;

answered Feb 12, 2020 at 15:04

Raj singh

3911 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related