уверен, как правильно связать и обновить модель, в которой флажки генерируются динамически. (Это проект 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: получить значения нескольких отмеченных флажков