Angular 4下拉多选不显示属性数据

Question

I just installed angular 4 multiselect dropdown to show the data that i am getting from JSON script using services. I am getting the data in my property but now i want to show it in a multiselect dropdown so that i can use multiple values and assign them to my next property. So in the below code i am calling a method of getSubject and it is returning me the data in this.subject property.

this._curriculumService.getSubject(this.appSession.tenant.tenancyName)
.finally(() => {this.saving = false;})
.subscribe((result: listResultDtoOfSubjectDto) => {
  this.subjects = result.items;

  this.id = this.subjects.map(a => a.code);
  this.itemName = this.subjects.map(a => a.name);

})

Now i want to show this data inside inside angular 4 dropdown multiselect and here is a code for that in my component.ts file. The problem is that the dropdown asked for a specific id and name of the property and only then it will be able to show the data in dropdown but in my case i have a name and code returning in this.subjects . So how can i show my data in this dropdown

optionsModel: number[];
myOptions: IMultiSelectOption[];
this.myOptions = [
  { id: 1, name: 'Physics' },
  { id: 2, name: 'English' },
  { id: 3, name: 'English' },
  { id: 4, name: 'Programming'}
];

HTML Code

  <div class="form-line focused">
   <div class="col-sm-4">
    <div class="form-group form-float">
     <div class="form-line focused">
      <ss-multiselect-dropdown 
        [options]="myOptions"
        [(ngModel)]="optionsModel" 
        (ngModelChange)="onChange($event)">
      </ss-multiselect-dropdown>
     </div>
    </div>
   </div>
  </div>

Answer 1

So for that don't declare type of your myOptions as IMultiSelectOption[] , instead keep it any or whatever you're receiving from service. As this plugin requires each options to have the id thus, you can add that property to myOptions objects after it's received from service response. So, make sure that property should be unique valued (eg subject code). Let this.subjects is an array of objects you got from service:

optionsModel: number[];
subjects: any;
this.subjects = [
  { code: 11, name: 'Physics' },
  { code: 12, name: 'English' },
  { code: 13, name: 'English' },
  { code: 14, name: 'Programming'}
];
this.subjects.forEach(function(e) { e.id = e.code }); 

The last line will add id property to each object with value same to subject code. Now the dropdown will work as expected.

Demo Example