Я не уверен, как правильно связать и обновить модель, в которой флажки генерируются динамически. (Это проект ASP.NET Core с Angular 2, изначально созданный с помощью генератора Yeoman) Или простой флажок по этому вопросу, который я только что обнаружил.
Ниже приведен сокращенный код, который имеет средства и временные интервалы. Каждый объект может иметь несколько временных интервалов. Список флажков временного интервала отображается нормально. Исходные данные указывают, что должен проверяться только один временной интервал. Но когда я загружаю объект, все временные интервалы проверяются. Они не связаны с ngModel, как я ожидал.
- Как это исправить, чтобы проверялись только временные интервалы, включенные в данные объекта, а не все?
- Как связать то, что проверено, со свойством ngModel timeslotids? Нужно ли создавать свойство массива для компонента и манипулировать им, а не полагаться на ngModel? (попробовал это, но явно не сделал это правильно, поэтому вернулся к приведенному ниже коду)
- У меня также, кажется, есть проблема привязки к простому флажку (haselectric), потому что это тоже не проверяет, когда это должно быть. Я пропускаю импорт, который исправит все это?
ОБЪЯСНЕНИЕ КОДА У меня есть два объекта (средство и временной интервал), поступающие из API, который я связываю с интерфейсами. Они были значительно уменьшены в свойствах ради простоты:
export interface IFacility {
id: number,
name: string,
haselectric: boolean,
timeslotids: number[],
timeslots: ITimeslot[]
}
export interface ITimeslot {
id: number,
timeslotname: string
}
Это данные JSON для временных интервалов:
[{"id":1,"timeslotname":"Daily"},{"id":2,"timeslotname":"Hourly"},{"id":4,"timeslotname":"Market"}]
Это данные JSON для одного объекта до его обновления:
{"id":2,"name":"Clements Building","haselectric":true,"timeslotids":[1],"timeslots":[{"id":1,"timeslotname":"Daily"}]}
Компонент для редактирования объекта (facility.component.html):
<form #form="ngForm" (ngSubmit)="submitForm()" *ngIf="formactive">
<input type="hidden" [(ngModel)]="updatedfacility.id" #id="ngModel" name="id" />
<div class="form-group">
<label for="name">Facility Name *</label>
<input type="text" class="form-control input-lg" [(ngModel)]="updatedfacility.name" #name="ngModel" name="name" placeholder="Facility Name *">
</div>
<div class="form-group">
<label for="exhibitspaces">Has Electric *</label>
<input type="checkbox" class="form-control input-lg" [(ngModel)]="updatedfacility.haselecric" #haselectric="ngModel" name="haselectric">
</div>
<div class="form-group">
<label for="timeslots">Select Timeslots Available for Rent *</label>
<div *ngIf="dbtimeslots" >
<span *ngFor="let timeslot of dbtimeslots" class="checkbox">
<label for="timeslot">
<input type="checkbox" [(ngModel)]="updatedfacility.timeslotids" value="{{timeslot.id}}" name="{{timeslot.id}}" [checked]="updatedfacility.timeslotids.indexOf(timeslot.id)" />{{timeslot.timeslotname}}
</label>
</span>
</div>
</div>
<button type="submit" class="btn btn-lg btn-default" [disabled]="form.invalid">Update</button>
</form>
Код для компонента (unit.component.ts)
import { Component, OnInit, Input, Output, OnChanges, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { FacilityService } from '../../../services/facility.service';
import { TimeslotService } from '../../../services/timeslot.service';
import { IFacility } from '../../../services/facility.interface';
import { ITimeslot } from '../../../services/timeslot.interface';
@Component({
template: require('./facility.component.html')
})
export class FacilityDetailsComponent {
facility: IFacility;
httpresponse: string;
successMessage: string;
errormessage: string;
showSuccess: boolean = true;
showError: boolean = true;
formactive: boolean = true;
dbtimeslots: ITimeslot[];
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _facilityservice: FacilityService,
private _timeslotservice: TimeslotService
) {}
ngOnInit(): void {
this._timeslotservice.getTimeslots().subscribe(timeslots => this.dbtimeslots = timeslots, error => this.errormessage = <any>error);
let id = +this._route.snapshot.params['id'];
this._facilityservice.getFacility(id)
.subscribe(facility => this.facility = facility,
error => this.errormessage = <any>error);
}
submitForm() {
//update the facility through the service call
this._facilityservice.updateFacility(this.facility)
.subscribe(response => {
this.httpresponse = response;
console.log(this.httpresponse);
this.successMessage = "Facility updated!";
this.formactive = false;
setTimeout(() => this.formactive = true, 3);
this.showSuccess = false;
},
error => {
this.errormessage = <any>error;
this.showError = false;
});
}
}
Постскриптум Причина, по которой у меня есть два свойства в объекте объекта для временных интервалов, заключается в том, что список идентификаторов гораздо проще передать в API для обновления. Вместо того, чтобы передавать полные модели (временные интервалы больше, чем у меня здесь и не нужны для обновления базы данных). Пожалуйста, оставляйте комментарии, поскольку это не связано с тем, что необходимо сделать.
Я нашел этот вопрос ... но, к сожалению, никто не ответил этому бедняге: ngmodel с динамическим массивом флажков в angular2 Попробовал это, но не сработало: Получить значения из динамического списка флажков Я также пробовал версию обновления локального свойства (изменения) флажка, но это тоже не сработало: Angular 2: получить значения нескольких отмеченных флажков
2 ответа
На основании ответа НЛО выше я смог найти решение своего вопроса. Спасибо, НЛО.
<div class="form-group">
<label for="timeslots">Select Timeslots Available for Rent *</label>
<div *ngIf="dbtimeslots">
<span *ngFor="let timeslot of dbtimeslots" class="checkbox">
<label>
<input type="checkbox" value="{{timeslot.id}}" name="{{timeslot.id}}" [checked]="(facility.timeslotids && (-1 !== facility.timeslotids.indexOf(timeslot.id)) ? 'checked' : '')" (change) ="updateSelectedTimeslots($event)" />{{timeslot.timeslotname}}
</label>
</span>
</div>
</div>
Тогда функция на компоненте:
updateSelectedTimeslots(event) {
if (event.target.checked) {
if (this.facility.timeslotids.indexOf(parseInt(event.target.name)) < 0) {
this.facility.timeslotids.push(parseInt(event.target.name));
}
} else {
if (this.facility.timeslotids.indexOf(parseInt(event.target.name)) > -1)
{
this.facility.timeslotids.splice(this.facility.timeslotids.indexOf(parseInt(event.target.name)), 1);
}
}
//console.log("TimeslotIDs: ", this.facility.timeslotids);
}
У меня есть код, похожий на ваш (ngFor
для всех возможных флажков, некоторые из них должны быть проверены, изменения должны быть сохранены в некоторой структуре данных, которую мы не повторяем), и вот что я придумаю :
<md-checkbox
*ngFor="let some of availableSomes"
name="{{ some }}"
checked="{{ data.somes && -1 !== this.data.somes.indexOf(some) ? 'checked' : '' }}"
(change)="updateSome($event)">
{{ some }}
</md-checkbox>
Вот updateSome
:
updateSome(event) {
if (-1 !== this.availableSkills.indexOf(event.source.name)) {
if (event.checked) {
this.data.somes.push(event.source.name);
} else {
this.data.somes.splice(this.data.somes.indexOf(event.source.name), 1);
}
}
}
Кроме того, я считаю, что это должно быть event.target
, но это event.source
из-за материала. Вид неуклюжего решения, но я думаю, что это поможет вам понять, как вы можете достичь того, чего хотите
Похожие вопросы
Связанные вопросы
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.