- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我不确定绑定(bind)和更新动态生成复选框的模型的正确方法。 (这是一个 ASP.NET Core 项目,Angular 2 最初是使用 Yeoman 生成器创建的)或者我刚刚发现的一个简单的复选框。
下面是精简的代码,它有一个设施和时间段。每个设施可以有多个时隙。时隙复选框列表显示正常。初始数据表明只应检查一个时隙。但是当我加载一个设施时,所有的时间段都会被检查。它们没有像我预期的那样与 ngModel 绑定(bind)。
代码解释我有两个对象(设施和时隙)来 self 绑定(bind)到接口(interface)的 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>
组件代码 (facility.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;
});
}
附言我在时隙的设施对象中有两个属性的原因是因为 id 列表更容易传递给 API 进行更新。而不是传递完整的模型(时隙比我这里的要大,不需要更新数据库)。请保留对此的评论,因为它与需要完成的工作无关。
我发现了这个问题……但遗憾的是,没有人回答这个可怜的家伙:ngmodel binding with dynamic array of checkbox in angular2试过这个但没有用:Get values from a dynamic checkbox list我还尝试了在复选框的(更改)上更新本地属性的版本,但这似乎也不起作用:Angular 2: Get Values of Multiple Checked Checkboxes
最佳答案
根据上面 НЛО 的回答,我找到了我的问题的解决方案。谢谢НЛО。
<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);
}
关于angular - 将 ngModel 绑定(bind)到动态复选框列表 : Angular 2/Typescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43596517/
我目前理解 [(ngModel)]="expression" 是从组件到 View 的双向绑定(bind),反之亦然。我也明白 [ngModel]="expression" 是单向绑定(bind)(我
我实际上是在重复一个 mat 输入字段,然后我用数组中对象的属性名称编写了 [(ngModel)] 作为 [(ngModel)] 的值 例如这是我拥有的对象数组: test = [{name: 'Ha
我正在观看的 Udemy Angular 6 视频显示使用第一种语法。但是,我使用 WebStorm 作为我的 IDE,当我使用 [(ngModel)]="variable" 语法时,它不会提供任何类
我正在尝试用 Angular 数组绘制 radioBoxes,然后获取选中的 radio 的值,但是模型不会改变它的值吗,有人可以帮我吗? HTML部分
我有以下 ckEditor 指令。底部是我从有关如何在编辑器中设置数据的示例中看到的两种变体: app.directive('ckEditor', [function () { return
这是一个模板示例: 这里他们两个做同样的事情。首选哪一个?为什么? 最佳答案 [(ngModel)]="overRideRate" 是 [ngModel]="overRideRate"的缩写形式
我得到的是一个动态生成的 ngModel 对象,并且某些不在顶层的属性仅在一个方向上绑定(bind)。 包括一个应该让事情变得更清晰的 plunkr,但我想做的是生成一个动态表单,并且如果属性嵌套在根
嗨,哪个更好?有什么区别?有什么优点和缺点? 这是两者的对比代码: 范围:{ ngModel:'=' } app = angular.module('app', []); a
我正在尝试根据 angularjs 中的某些属性绑定(bind)未知的数组索引。 //javascript method inside controller functio
我试图在 ngFor 循环中输入具有正则表达式要求的输入,但收到“无法读取未定义的属性‘有效’”错误,我将其用作页面加载时弹出的错误消息。 这是我目前的代码: (我拥有的键管道是一个自定义管道,因为
我正在尝试将 ngControl 表单验证添加到 Angualr js 2 中的 bootstrap 4 typehead 控件。代码如下。 {{ requ
[(ngModel)] 在表单标签内不工作 当我使用 Multi Select Outside Form 标签时,可以正常选择 All 和取消选择所有功能 但是当我把它放入 Form 里面时,它正在工
假设我想要一个指令,它接受用户在输入中键入的内容并将其转换为小写。 所以我想出了一个这样的指令(在这个 Plunker http://plnkr.co/edit/jnE3s8MRr1tFCX0WVYe
我的名为 datePicker 的指令位于输入元素上,它从模型中获取公历日期并将其转换为最终用户的波斯日期。 从 datePicker 更改日期(这里是 jalali(波斯日期选择器)),转换为 gr
在这个例子中,我看到了解释,但我仍然不确定我为什么在这种情况下将#name 模板变量设置为“ngModel”。如果有 2 或 3 个其他带有模板变量的输入字段,您是否也将它们的值设置为“ngModel
这是我的 HTML 代码: Start 因此,startDate 存储为数字(长整型),但我想显示本地日期时间。我真的不知道该怎么做。我使用相同的组件来创建和更新模型。创建工作正常,因为
喜欢在 this question ,我要加.error在表单域的父级 .control-group当scope.$invalid是真的。 但是,像 ng-class="{ error: formNa
我正在尝试为颜色选择器创建指令,但 ngModel 值的值未更新。知道出了什么问题吗? 这是我的代码: .directive('colpkr', [function () {
我不是 Angular 事件方面的专家,但这是我的问题。如果我运行以下代码,我基本上会用错误的信息更新后端,因为 item.their_platform 在 togglePlatform() 触发之前
我有这个数组试图在我的模板中显示,不知何故它无法正确显示。如果我这样做 [value],它将给我正确的值,但 ofc。不绑定(bind)到数组和值。 大批: {"pluNo":1,"pluName":
我是一名优秀的程序员,十分优秀!