我遇到无线电控制的问题,我无法通过数据库调用的编辑进行设置。
我的收音机是一个可重复使用的组件。在我的主应用程序onInit上我可以像这样设置它并且它工作正常:
ngOnInit() {
this.model_initials.available='M';
}
但是,当我从数据库加载时,该值应设置为
this.model_initials.available='Q';
以下是我加载onInit的方法:
ngOnInit() {
//this.model_initials.available='M';
this._modelService.getModel(this.model_id)
.subscribe(model_initials => this.model_initials = model_initials,
null,() => { this.isLoading = false; });
}
我可以验证数据是否已正确加载,因为页面加载会将对象打印到页面:
{{this.model_initials | json }}
{ "available": "Q", "horizon": 8 }
但是控件未设置为“Q”。实际上什么都没有。
但是如果然后点击收音机它会在M和Q之间交替查找并且可以提交到数据库。所以唯一的问题是来自网络呼叫的数据的控制初始化。我是新手,所以我完全不理解。是因为控制是在通话后加载?但我认为ngOnInit应该解决?
这是我的组件的HTML和打字稿代码:
<radio ngModel="model_initials.available" [available]="model_initials.available" (ngModelChange)="myValueChangeRadio($event);" #available="ngForm" ngControl="available" [useForm]="true"></radio>
import {Component, OnInit,Input,Output,EventEmitter,Provider, forwardRef} from '@angular/core';
import { NgClass,NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/common';
import {RouterLink} from '@angular/router-deprecated';
const SELECTOR_VALUE_ACCESSOR: Provider = new Provider(NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => RadioFormatSelectorComponent),
multi: true
});
@Component({
selector: 'radio',
template: `
<div class="radio-inline custom-control custom-radio">
<label>
<input (ngModelChange)="onChange($event)" (click)="model='M'" [ngModel]="{checked: model == 'M'}" type="radio" id="yes" name="available" [ngClass]="{'form-control': useForm}">
<span class="custom-control-indicator"></span>
Monthly
</label>
</div>
<div class="radio-inline custom-control custom-radio">
<label>
<input (ngModelChange)="onChange($event)" (click)="model='Q'" [ngModel]="{checked: model == 'Q'}" type="radio" id="no" name="available" [ngClass]="{'form-control': useForm}">
<span class="custom-control-indicator"></span>
Quarterly
</label>
</div>
`,
directives: [NgClass],
providers: [SELECTOR_VALUE_ACCESSOR]
})
export class RadioFormatSelectorComponent implements OnInit{
@Input() useForm = false;
@Input() available:any;
@Output() ngModelChange = new EventEmitter();
constructor() {}
model: any;
ngOnInit() {
console.log(this.model);
this.model = this.available;
}
onChange(newValue:any) {
this.ngModelChange.emit(this.model);
}
onModelChange: Function = () => {};
onModelTouched: Function = () => {};
writeValue() : void {
this.model;
}
registerOnChange(fn: Function): void {
this.onModelChange = fn;
}
registerOnTouched(fn: Function): void {
this.onModelTouched = fn;
}
}
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Unexpected token '=' at column 24 in [{checked: model == 'M'}=$event] in RadioFormatSelectorComponent@3:74 ("m-radio">
<label>
<input (ngModelChange)="onChange($event)" (click)="model='M'" [ERROR ->][(ngModel)]="{checked: model == 'M'}" type="radio" id="M" name="available" [ngClass]="{'form-control'"): RadioFormatSelectorComponent@3:74
Parser Error: Unexpected token '=' at column 24 in [{checked: model == 'Q'}=$event] in RadioFormatSelectorComponent@10:74 ("m-radio">
<label>
<input (ngModelChange)="onChange($event)" (click)="model='Q'" [ERROR ->][(ngModel)]="{checked: model == 'Q'}" type="radio" id="Q" name="available" [ngClass]="{'form-control'"): RadioFormatSelectorComponent@10:74
答案 0 :(得分:1)
对于双向数据绑定,您需要更改此内容:
[ngModel]="{checked: model == 'M'}"
对此:
[(ngModel)]="{checked: model == 'M'}"
如果没有你需要的副作用:
[ngModel]="{checked: model == 'M'}" (ngModelChange)="{checked: model == $event"}>