簡體   English   中英

范圍輸入不會在模板驅動形式(角度2)中反映默認值

[英]Range Input won't reflect default value in Template Driven Form (Angular 2)

我希望我的范圍輸入加載時的默認值為0。默認情況下,在頁面加載時,每個輸入都設置為中間。 當我檢查元素時,我看到了

<input
    class="form-control ng-untouched ng-pristine ng-valid"
    step="1"
    type="range"
    ng-reflect-model=""
    name="my_own_job"
    id="bus_info_04_a_01_01"
    min="0"
    max="10"
    value="0"
>

一直到最后,您確實看到了值的傳遞。這就是*ngFor內的輸入外觀。

<input class="form-control" type="range" step="1"
    [attr.name]="ans.ctrlName"
    [attr.id]="ans.id"
    [attr.min]="Data.loExtreme"
    [attr.max]="Data.hiExtreme"
    [attr.value]="ans.value"
    [(ngModel)]="UserResponse[ans.respName]"
    #{{ans.respName}}="ngModel"
>

我也像這樣動態創建變量

//From parent component
@Input() Data : Question;

//For dynamic variables for ngModel
UserResponse : { [ propName : string ] : string } = {};

//Function called in OnInit
loadResponses(){

     let data       : any           = this.Data;
     let control    : string        = data.ctrlName;
     let response   : string        = data.respName;
     let multiResp  : Array<any>    = data.answers;
     let defVal     : string        = '';
     let load       : Array<string> = [];

     load.push( control );

     if( response == '' || response == undefined ){

         if( this.Template == 'multi_fader' ){

             multiResp.forEach( resp => {

                 this.UserResponse[ resp.ctrlName ] = resp.answer;
                 this.UserResponse[ resp.respName ] = 0;

             });

         }
         else {

             multiResp.forEach( resp => {

                 this.UserResponse[ resp.ctrlName ] = resp.answer;
                 this.UserResponse[ resp.respName ] = defVal;

            });
        }
     }
     else {

         load.push(response);
         load.forEach( ctrl => { this.UserResponse[ ctrl ] = defVal; });

         this.UserResponse[ this.Data.ctrlName ] = this.Data.question;

    }
}

我嘗試將值設置為UserResponse[respName]但輸入的value屬性只是顯示為單詞value ,其旁邊沒有相等。 我來回取出所有value屬性,只留下ngModel內容,並注釋了設置默認值的函數部分,以查看僅value屬性是否可以正常工作而不會受到函數的任何其他干擾,傳遞值的結果相同,但輸入設置在中間。 我嘗試將其設置為1只是為了看看是否0使它為null但這沒什么區別。

我什至將json文件中該輸入的每個問題的value屬性更改為1 ,它在檢查中顯示,但沒有更改輸入的默認位置。 有人可以說明為什么會發生這種情況以及如何解決嗎? 這里有一個Plunkr整個機制的,如果你需要看看還有什么是怎么回事。

如果您更改模板,

[attr.value]="ans.value"

至,

[(ngModel)]="ans.value"

它應該在范圍輸入視圖中將其值初始化為零(已在plunker中確認)。 雖然ngModel模板中的另一個ngModel在做什么。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM