angular2 - 可重用组件不会从网络呼叫数据初始化

时间:2016-08-12 16:36:22

标签: angular

我遇到无线电控制的问题,我无法通过数据库调用的编辑进行设置。

我的收音机是一个可重复使用的组件。在我的主应用程序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

1 个答案:

答案 0 :(得分:1)

对于双向数据绑定,您需要更改此内容:

[ngModel]="{checked: model == 'M'}"

对此:

[(ngModel)]="{checked: model == 'M'}"

如果没有你需要的副作用:

[ngModel]="{checked: model == 'M'}" (ngModelChange)="{checked: model == $event"}>