使用占位符和 ngModel 动态生成输入元素答案

【问题标题】：Generate input element dynamically with placeholder & ngModel使用占位符和 ngModel 动态生成输入元素
【发布时间】：2020-09-16 18:10:08
【问题描述】：

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

在我的组件中，我有两个映射如下，其中两个映射的键相同，将值映射到标题：

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

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以使用带有键名数组的*ngFor 来循环并绑定地图中的所有值。

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

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

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

【讨论】：

【解决方案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 是默认占位符。不要忘记将表达式括在 {{}} 括号中。

【讨论】：