Angular2 выбранный вариант с объектами

У меня есть приложение Angular 2, которое имеет дело с клиентами и задним концом пружинного упора. Объект клиента имеет тип клиента, который также является объектом, и у меня есть раскрывающаяся форма для клиента, работающая так, чтобы объекты сохранялись как значение, однако я не могу понять, как выбрать правильный тип клиента, когда существующий клиент загружается в форму.Angular2 выбранный вариант с объектами

<select class="form-control" required [(ngModel)]="customer.customerType" > 
    <option *ngFor="let ct of customerTypes" [ngValue]="ct">{{ct.customerType}}</option> 
</select>

В приведенном выше фрагменте, если клиент уже имеет тип клиента, выпадающее меню не будет выбирать какое-либо значение. Я помню, с той же проблемой с angular1, которая была решена с помощью ngOptions:

<select ng-model="customer.customerType" 
     ng-options="customerType.customerType for customerType in customerTypes 
     track by customerType.customerType" > 
</select>

Итак, мой вопрос, как повторить путь Angular1 решить эту проблему в угловом 2

источник

2016-06-09 Drew

Просто присваивание значения по умолчанию 'customer.customerType' должно делать то, что вы хотите. 'ngValue' и' customer.customerType' должны указывать на один и тот же экземпляр объекта, а не только на два объекта с одним и тем же контентом. –

Я понял, что ему нужен один и тот же экземпляр объекта, а не объекты с одним и тем же контентом, но мне было интересно, есть ли способ, с помощью которого select может быть передан что-то похожее на сравнителя на языке java, что он будет использовать для оценки того, являются ли экземпляры объектов одинаковыми. Я закончил тем, что заменил экземпляр, который возвращается в остальном вызове, с эквивалентным объектом из вариантов выбора, который чувствует себя действительно неуклюжим. – Drew

Возможный дубликат [Элемент выбора привязки к объекту в Угловом 2] (https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2) –

Я взял немного неуклюжий подход замены экземпляра CustomerType, который возвращается в моем объекте клиента, с который держал в массиве CustomerType. Это может быть сделано только один раз, как клиент и CustomerTypes были возвращены из скопированный:

ngOnInit() { 
    let id = this._routeParams.get('id'); 
    this._service.getCustomer(id).subscribe(customer => { 
     this.customer = customer; 
     this.updateCustomerType(); 
    }); 
    this._service.getCustomerTypes().subscribe(customerTypes =>{ 
     this.customerTypes = customerTypes; 
     this.updateCustomerType(); 
    }); 
} 
private updateCustomerType(): void{ 
    if(this.customer.customerType != null && this.customerTypes.length != null){ 
    for (var customerType of this.customerTypes) { 
     console.log("Customer Type: ", customerType); 
     if(this.customer.customerType.id == customerType.id){ 
     this.customer.customerType = customerType; 
     } 
    } 
    } 
}

источник

2016-06-13 20:05:32 Drew

Я предлагаю вам изменить подход к строительство этого путем создания выберите компонент:

import {Component, Output, EventEmitter} from 'angular2/core'; 

@Component({ 
    selector: 'custype-selector', 
    template: ` 
    <div> 
     <label>Cust type</label> 
     <select #sel (change)="select.emit(sel.value)"> 
      <option *ngFor="#custype of customertypes"> {{custype}} </option> 
     </select> 
    </div>` 
}) 
export class CusTypeSelector { 
    @Output() select = new EventEmitter(); 
    customertypes= ["type1", "type2"] 

    ngOnInit(){ 
     this.select.emit(this.customertypes[0]); 
    } 
}

Я жёстко массив в селекторе, но вы, конечно, можете добавить параметр Input к компоненту с customertypes, если Вам нравится

можно затем использовать вышеуказанный компонент, как это:

<custype-selector (select)="custype = $event"></custype-selector>

источник

2016-06-09 21:33:43 AngJobs

Спасибо, мне нравится внешний вид из этого, и даст ему уйти. Из интереса, есть ли причина, по которой вы сказали, что типы клиентов могут быть предоставлены в качестве параметра, а именно, включая службу, которая извлекает типы клиентов из бэкэнд-REST api? Я мог видеть, что полезно, что компонент с выпадающим списком может выбрать собственный список параметров. – Drew

Я была такая же проблема, и я решил это так:

<select class="form-control" required [(ngModel)]="customer.customerType" > 
    <option *ngFor="let ct of customerTypes" 
     [ngValue]="ct" 
     [attr.selected]="customer.customerType.customerType==ct.customerType ? true : null" 
     >{{ct.customerType}}</option> 
</select>

Благодаря Günter Zöchbauer

источник

2016-08-22 09:09:21 Christoph

Angular2 выбранный вариант с объектами

ответ

Смежные вопросы