范围输入不会反映模板驱动表单中的默认值 (Angular 2)

Question

我希望我的范围输入以默认值 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。

Answer 1

如果您更改模板，

[attr.value]="ans.value"

到，

[(ngModel)]="ans.value"

它应该在范围输入视图中将值初始化为零（在 plunker 中确认）。不过不确定您对模板中的其他 ngModel 做了什么。

范围输入不会反映模板驱动表单中的默认值 (Angular 2)

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

html

angular

angular-forms