2017-04-27 4 views
0

ich die unten Select-Box habenMultiselect in AngularJS 2

<select multiselect name="BodyColor.Default" [(ngModel)]="BodyColor.Default"> 
    <option *ngFor="let z of BodyColor.Options" value={{z.OptionID}}> 
     {{z.OptionID}} 
    </option> 
</select> 

Ist es möglich, diese Mehrfachauswahl zu speichern, wenn BodyColor.Default vom Typ string.

Ich verwende dies als Teil der JSON-Struktur, die ich für die Anzeige von Daten verwende und ich kann den Datentyp dafür nicht ändern.

Oder ist es nur möglich, den Datentyp von BodyColor.Default auf Anforderung zu ändern, wenn ich in der HTML-Datei zu Array-Typ möchte.

Hier ist die JSON

"Attributes": [ 
     { 
      "AttributeID": "Body Color", 
      "Options": [ 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Aluminum", 
       "Description": "Aluminum", 
       "Position": 1.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Black", 
       "Description": "Black", 
       "Position": 2.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Blue Cobalt-2747C", 
       "Description": "Blue Cobalt-2747C", 
       "Position": 3.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Blue Midnight-295C", 
       "Description": "Blue Midnight-295C", 
       "Position": 4.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Blue-Costco-286C", 
       "Description": "Blue-Costco-286C", 
       "Position": 5.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Blue-P2955C", 
       "Description": "Blue-P2955C", 
       "Position": 6.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Camo", 
       "Description": "Camo", 
       "Position": 7.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Chrome", 
       "Description": "Chrome", 
       "Position": 8.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Cinnamon", 
       "Description": "Cinnamon", 
       "Position": 9.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Copper", 
       "Description": "Copper", 
       "Position": 10.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Green-357C", 
       "Description": "Green-357C", 
       "Position": 11.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Gunmetal-7C", 
       "Description": "Gunmetal-7C", 
       "Position": 12.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "N/A", 
       "Description": "N/A", 
       "Position": 13.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "OD Green-7771C", 
       "Description": "OD Green-7771C", 
       "Position": 14.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Onyx", 
       "Description": "Onyx", 
       "Position": 15.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Orange", 
       "Description": "Orange", 
       "Position": 16.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Pewter-6C", 
       "Description": "Pewter-6C", 
       "Position": 17.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Platinum", 
       "Description": "Platinum", 
       "Position": 18.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Red-200C", 
       "Description": "Red-200C", 
       "Position": 19.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Red-202C", 
       "Description": "Red-202C", 
       "Position": 20.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Slate-10C", 
       "Description": "Slate-10C", 
       "Position": 21.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "Stainless", 
       "Description": "Stainless", 
       "Position": 22.000000000, 
       "Default": false 
      }, 
      { 
       "AttributeID": "Body Color", 
       "OptionID": "White", 
       "Description": "White", 
       "Position": 23.000000000, 
       "Default": false 
      } 
      ], 
      "Description": "Body Color", 
      "InputType": "Multiple Select", 
      "Default": "", 
      "Required": false, 
      "EpicorOnly": false 
     }, 

Edit: Also, was der Fall zu sein scheint, ist, dass sie die Daten zu speichern, aber diesen Fehler in abgular values.map werfen ist keine Funktion. Ich sehe angular konvertieren die Zeichenfolge automatisch in Array und speichert den Wert, aber später wirft diesen Fehler.

Antwort

0

Können Sie versuchen, den Datentyp als String oder Array zu ändern? Beispiel: private Testing: string[] | string;

+0

Kann ich das im HTML ändern ?? – user1221989

+0

Nein. Sie müssen es in der Komponente tun. – prashanth

Verwandte Themen