Refactoring Javascript für Angular 2

Question

Ich habe ein einfaches Tool zum Hinzufügen und Entfernen von Helden zu und von einer Liste mit einem select erstellt.

Wenn ein Held ausgewählt ist, wird er zum Array myheroes hinzugefügt und als Listenelement angezeigt. Der ausgewählte Held ist auch in der select deaktiviert.

Wenn ein Held aus der Liste gelöscht wird, wird er im select aktiviert, damit er erneut ausgewählt werden kann.

Dies funktioniert wie erwartet, aber ich fühle, dass es einen besseren und eleganteren Ansatz unter Verwendung der Merkmale von Angular 2 geben muss. eine attribute-Direktive, die auf Änderungen an myheroes wartet.

Alle Ratschläge/Anleitungen sind willkommen.

Plnkr

@Component({ 
    selector: 'my-app', 
    template: ` 
    <p>My heroes:</p> 
    <ul> 
    <li *ngFor="let myhero of myheroes"> 
     {{ myhero }} 
     <a href="#" (click)="deleteItem(myhero)">x</a> 
    </li> 
    </ul> 
    <select id="hero" #hero (change)=addItem(hero)> 
    <option>Select a hero</option> 
    <option *ngFor="let hero of heroes">{{ hero }}</option> 
    </select> 
` 
}) 
export class AppComponent { 
    heroes = ['Windstorm','Bombasto','Magneta','Tornado']; 
    myheroes= []; 

    deleteItem(item: string) { 
    const index = this.myheroes.indexOf(item); 
    this.myheroes.splice(index, 1); 
    //TODO enable item in select options 
    const output = document.getElementById('hero').options; 

    for(const i=0;i<output.length;i++) { 
     if(output[i].value == item){ 
     output[i].disabled = false; 
     } 
    } 
    } 

    addItem(item: HTMLSelectElement) { 
    if(item.value != 'Select a hero') { 
     this.myheroes.push(item.value); 
     item.options[item.selectedIndex].disabled = true; 
    } 
    } 
} 

Answer 1

Html Optionen haben eine disabled-Attribut, das Sie [disabled]="<condition>" binden können, so dass dies die bevorzugte Art und Weise der Handhabung der Aktivierung/Deaktivierung von ausgewählten Optionen eher, dass die Verwendung eines Dokuments Wähler wäre.

Wenn Sie zu diesem Zweck wechseln würden, wäre es keine Frage, dass die Handhabung dieser Funktionalität nicht getrennt werden muss.

Ein weiterer Punkt zu Ihrem Codebeispiel - Sie könnten den Wert in der Auswahl innerhalb Ihrer Behandlung für das Änderungsereignis zurücksetzen, da ein Fehler darin besteht, wenn Sie ein Element auswählen und es dann sofort aus der Liste entfernen Sie können dieses Element dann nicht wieder in die Liste einfügen, ohne zuerst ein anderes Element auszuwählen, da das Änderungsereignis nur ausgelöst wird, wenn sich das an die Auswahl gebundene Modell ändert.