Блог

Главная - Вопросы по программированию - Угловой 11, как привязать новый объект в шаблоне к компоненту

Угловой 11, как привязать новый объект в шаблоне к компоненту

#angular #typescript #angular2-databinding

Вопрос:

Когда пользователь загружает другой выбор (объект) из раскрывающегося списка опций, я хотел бы, чтобы НОВЫЙ объект возвращался в функции (изменить). Но он каждый раз возвращает объект по умолчанию, даже если выбор изменяется правильно. Этот тип привязки работал в AngularJS при использовании $scope. Не уверен, что моя угловая модель 11 ngModel и т. Д. Верна. (Я импортировал модуль форм)

компонент.ts…

  public selectedQuery: any;


// default object...
 public myQueries: [{ 
 myQueryId: number, 
 myQueryCreatedDate: Date, 
 myQueryString: string 
 }] = [{
    myQueryId: 0,
    myQueryCreatedDate: new Date(),
    myQueryString: "Please select a query"
  }]


dropDownListBuild(); // function builds correctly, loads myQueries array with options
...

this.selectedQuery = this.myQueries[0]; // gets set as default
...


onQueryChange(query: any) {
    console.log(this.selectedQuery   query); // not seeing any change happen
  }

component.html…

 <div class="selectClass">
    <select [(ngModel)]="selectedQuery" (change)="onQueryChange(selectedQuery)">
            <option *ngFor="let opt of myQueries" [ngValue]="selectedQuery"> {{opt.myQueryString}}</option>
     </select>       
</div>

Ответ №1:

Измените свой HTML — код на следующий:

 <div class="selectClass">
  <select [(ngModel)]="selectedQuery" (ngModelChange)="onQueryChange($event)">
    <option *ngFor="let opt of myQueries" [ngValue]="opt">
      {{ opt.myQueryString }}
    </option>
  </select>
</div>

Изменения:

  1. Используйте (ngModelChange)="onQueryChange($event)" вместо (change)=onQueryChange(selectedQuery) того, чтобы получать новый запрос — более подробная информация ниже.
  2. Изменение [ngValue]="selectedQuery" на [ngValue]="opt" — предыдущая версия означало, что вы трижды повторяли тот же запрос, что и значение, вы просто изменили отображаемый текст (поэтому каждый параметр был представлен правильным отображаемым текстом, но значения всегда были одинаковыми).

Более подробная информация о событии изменения: (change) обязательно произойдет событие изменения, даже без углового, это просто классическое событие изменения ввода. Вы можете использовать его без ngModel, но использование с ngModel не особенно хорошо работает, так как это событие (или, по крайней мере, может быть) запущено до обновления ngModel.

Вот почему вы должны использовать выделенный (ngModelChange) , который является результатом ngModel директивы, поэтому он запускается всегда после ngModel изменения модели.

Кстати. Если вам не нужно определять момент изменения запроса, но вместо этого вам просто нужно сохранить правильный запрос в selectedQuery атрибуте — просто примените второе исправление, и вы сможете удалить ngModelChange .

Комментарии:

1. Спасибо за ваш вклад, это возвращается… «3: Объект» не знаете, как получить доступ к свойствам объекта?

2. query.target.value это ваш объект запроса, поэтому вы можете получить доступ к свойствам просто по их именам. Обновил мой пример, чтобы показать, как вы можете получить доступ к свойствам и как распечатать весь объект, используя JSON.stringify в качестве примера.

3. Я согласен, что это должно сработать, но все это не определено. Я могу получить нужные мне свойства из ngModel «selectedQuery», но он не обновляется с изменением onQueryChange, он остается на значении по умолчанию [0].

4. Мне действительно жаль, но вчера я был совершенно неправ. Обновил свой ответ, так что теперь он должен быть полностью правильным. Пожалуйста, проверьте текущую версию, и она должна решить ваши проблемы.

5. Ты крут! Это все исправило, я не могу отблагодарить тебя как следует.

Метки: ,