Question

我想以角度2+动态生成输入元素。我的占位符标题数组和值数组如下所示：

在我的组件中，我有两个映射，如下所示，两个键都相同，将值映射到title：

const placeholderMap = {fullName: 'Name', value: 'Product Value'};
cont valueMap = {fullName: 'Alpha Product', value: '2234.234'};

我想使用上面的地图并动态生成如下的输入元素：

<input matInput placeholder="Name" value='Alpha Product'/>
<input matInput placeholder="Product Value" value='2234.234'/>

Answer 1

您可以使用一个带有一系列键名的*ngFor循环并绑定地图中的所有值。

<input matInput *ngFor="let key of ['fullName', 'value']"
  [placeholder]="placeholderMap[key]"
  [(ngModel)]="valueMap[key]" />

除了在模板中明确指定所有键名，您还可以获得对组件中所有键的引用，如下所示：

ngOnInit() {
  this.inputKeys = Object.keys(this.valueMap);
}

Answer 2

对于AngularJS ，请使用ng-attr-placeholder而不是[placeholder]。

例如，我使用不同的占位符表示不同的搜索字词，

 ng-attr-placeholder="{{isAdvanceSearch ? setPlaceholder(searchOption) : 'John Smith, 08/23/1970, 123'}}"

这里基于isAdvanceSearch变量，我在setPlaceholder方法中设置了不同的占位符。

setPlaceholder方法返回占位符，以在输入字段中进行设置。

$scope.setPlaceholder = function(searchOption) {
     if (searchOption === "foo") {
          return "Search by foo… e.g. foo1";
     } else if (searchOption === "bar") {
          return "Search by bar… e.g. bar123";
     } else {
          return "John Smith, 08/23/1970, 123";
     }
};

注意：John Smith, 08/23/1970, 123是默认的占位符。不要忘记将表达式包装在{{}}括号中。

使用占位符＆amp;动态生成输入元素ngModel

2 个答案: