设置 ngModel 默认值 angular 2答案

【问题标题】：Setting ngModel default value angular 2设置 ngModel 默认值 angular 2
【发布时间】：2017-06-11 00:21:23
【问题描述】：

Angular 2 中的 ngModel 有问题。有一项任务是从组件类中的数组中输出几个输入。发现了一种使 ngModel 从 [name] 属性中获取其值而不在 [()] 中包含 ngModel 的可能性。我想知道是否有办法为这些输入提供默认值。

个人详细信息.component.ts ：

import {
    Component,
} from '@angular/core';

import { Input }from './Input'

@Component({
     selector: 'personal-details',
     styleUrls: ['personal-details.component.sass'],
     templateUrl: 'personal-details.component.html'
})
export class PersonalDetailsComponent {
     title: string;
     inputs: Input[] = [
         new Input('Name', 'text', 'Name', true, true),
         new Input('Surname', 'text', 'Surname', true, true),
         new Input('Mobile phone Number', 'text', 'phone', true, true),
         new Input('Date of Birth', 'text', 'birthday', false, true),
         new Input('Title', 'text', 'title', false, false),
         new Input('Title after name', 'text', 'title-after-name', false,     false),
         new Input('Personal number', 'text', 'personal-number', false, false),
         new Input('National ID/Passport number', 'text', 'personal-id', false, true),
    ];
    save = function (form) {
        console.log(form);
    }
    constructor(){
        this.title = 'someName';
    }
}

这是我的模板：

<h4 class="profile__title">Personal Details</h4>
<form #personalDetails="ngForm"   (ngSubmit)="save(personalDetails.value)">
    <div layout="row" flex-wrap>
         <div class="profile__input-wrapper" *ngFor="let input of inputs" flex="33">
             <md-input-container class="profile__input-container">
                <input md-input
                   [placeholder]="input.placeholder"
                   [type]="input.type"
                   [name]="input.name"
                   [disabled]="input.isDisabled"
                   [required]="input.isRequired"
                   ngModel>
            </md-input-container>
        </div>
    </div>
    <profile-footer ></profile-footer>
</form>

尝试了其他几种方法用 ngFor 列出它们，但没有成功。

【问题讨论】：

标签： javascript angular angular2-forms angular2-ngmodel ngmodel

【解决方案1】：

通过添加 ngModel="{{input.defaultValue}}" 解决了这个问题

【讨论】：

哦，呵呵！我忽略了您正在对 ngModel 进行单向绑定（当您执行 ngModel 时）。因此，您将其更改为双向数据绑定并且有效。我还是很想念。

【解决方案2】：

直接的方法是使用带有单向绑定的 ngModel

<input md-input
    [placeholder]="input.placeholder"
    [type]="input.type"
    [name]="input.name"
    [disabled]="input.isDisabled"
    [required]="input.isRequired"
    [ngModel]="input.value">

它将初始值传递给输入，而不对事件做出反应并将更改传递回模型。

【讨论】：

【解决方案3】：

应该像绑定value属性一样简单：

[value]="input.intitialValue"

或者如果这不起作用：

[ngValue]="input.intitialValue"

【讨论】：

感谢您的回答！ [ngValue] 返回语法错误。 [value] 似乎是有效的，但在实际视图中没有显示任何结果。虽然 ng-reflect-value="1" 已经出现在 DOM 中。