Javascript 设置 ngModel 默认值 angular 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41858054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting ngModel default value angular 2
提问by Mike Kovetsky
Have a problem with ngModel in angular 2. Have a task to output a couple of inputs from an array in component class. Discovered a possibility to make ngModel take its value from [name] attribute without embracing ngModel in [()]. And I wonder if there is a way to provide a default value to these inputs.
angular 2 中的 ngModel 有问题。有一项任务，从组件类中的数组输出几个输入。发现了一种使 ngModel 从 [name] 属性中获取其值而不在 [()] 中包含 ngModel 的可能性。我想知道是否有办法为这些输入提供默认值。
personal-details.component.ts :
个人详细信息.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';
}
}
Here`s my template:
这是我的模板：
<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>
Tried several other approaches to list them with ngFor, no success.
尝试了其他几种方法来用 ngFor 列出它们，但没有成功。
采纳答案by admax
The straightforward way would be using ngModel with one-way binding
直接的方法是将 ngModel 与单向绑定一起使用
<input md-input
[placeholder]="input.placeholder"
[type]="input.type"
[name]="input.name"
[disabled]="input.isDisabled"
[required]="input.isRequired"
[ngModel]="input.value">
It would pass the initial value to the input without reacting to events and passing changes back to the model.
它会将初始值传递给输入，而不会对事件做出反应并将更改传递回模型。
回答by Mike Kovetsky
resolved the issue by adding ngModel="{{input.defaultValue}}"
通过添加 ngModel="{{input.defaultValue}}" 解决了该问题
回答by Ben Richards
It should be as simple as binding to the value attribute:
它应该像绑定到 value 属性一样简单：
[value]="input.intitialValue"
or if that doesn't work:
或者如果这不起作用：
[ngValue]="input.intitialValue"
