范围输入不会在模板驱动形式（角度2）中反映默认值

Question

I want my range inputs to load with a default value of 0. When the page loads each input is set to the middle by default. When I inspect the element I see this

<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"
>

All the way at the end you see the value is indeed passed in. Here's what the input looks like which is inside of an *ngFor by the way.

<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"
>

I'm also creating my variables dynamically like this

//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;

    }
}

I tried setting the value to UserResponse[respName] but the value property on the input just shows up as the word value with no equal next to it. I back and forth taking out the value property all together leaving just the ngModel stuff as well as commenting out the part of the function that sets the default value to see if just the value property alone would work without any other interference from from the function and it was the same result with the value being passed but the inputs being set in the middle. I tried setting it to 1 just to see if maybe 0 was making it null but that made no difference.

I even changed the value property on each question for that input in my json file to 1 and it shows up in the inspection yet doesn't change the default placement of the input. Can someone please shed some light on why this is happening and how to fix it? Here's a Plunkr of the entire mechanism if you need to see what else is going on.

Answer 1

If you change in the template,

[attr.value]="ans.value"

to,

[(ngModel)]="ans.value"

it should initialize the value to zero in the range input view (confirmed in plunker). Not sure what you are doing with the other ngModel in your template though.