angular2 - 재사용 가능한 구성 요소가 네트워크 호출 데이터에서 초기화되지 않습니다.

Question

데이터베이스 호출에서 편집으로 설정할 수없는 라디오 컨트롤에 문제가 있습니다.

내 라디오는 재사용이 가능한 구성품입니다. 내 주요 응용 프로그램에의 onInit I는 다음과 같이 설정할 수 있으며, 그것을 잘 작동합니다 :

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; }); 

}

나는 데이터가 적절히 번째 페이지로드 인쇄에 becuase로드되었는지 확인할 수 있습니다

페이지의 개체 :

{{this.model_initials | json }} 
{ "available": "Q", "horizon": 8 } 

그러나 컨트롤이 "Q"로 설정되어 있지 않습니다. 사실 아무것도 설정하지 않았습니다.

그러나 라디오를 클릭하면 M과 Q가 번갈아 가며 찾아 데이터베이스에 제출할 수 있습니다. 따라서 유일한 문제는 네트워크 호출의 데이터로부터 제어를 초기화하는 것입니다. 나는 초보자이므로 이해하지 못한다. 호출 후 컨트롤이로드되기 때문입니까? 하지만 그건 ngOnInit이 해결해야만하는 것이었지만? 양방향 데이터에 대한

<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 

Answer 1

이를 변경해야 바인딩 : 여기에

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

:

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

다음

구성 요소에 대한 내 HTML 및 타이프 라이터 코드

당신이 필요로하는 paratheses없이 :

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