Angular 使用占位符动态生成输入元素&；ngModel_Angular_Typescript

Angular 使用占位符动态生成输入元素&；ngModel

angular typescript

Angular 使用占位符动态生成输入元素&；ngModel,angular,typescript,Angular,Typescript,我想在angular 2+中动态生成输入元素。我有如下占位符标题数组和值数组：在我的组件中，我有两个映射，如下所示，其中两个的键相同，将值映射到标题： const placeholderMap = {fullName: 'Name', value: 'Product Value'}; cont valueMap = {fullName: 'Alpha Product', value: '2234.234'}; 我想使用上面的映射并动态生成如下输入元素： <input matInput

我想在angular 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'/>

您可以使用一个带有键名数组的

*ngFor

来循环和绑定地图中的所有值

除了在模板中显式指定所有键名称，还可以获得组件中所有键的引用，如下所示：

ngOnInit（）{
this.inputKeys=Object.keys（this.valueMap）；
}

您可以使用一个带有键名数组的

*ngFor

来循环和绑定地图中的所有值

除了在模板中显式指定所有键名称，还可以获得组件中所有键的引用，如下所示：

ngOnInit（）{
this.inputKeys=Object.keys（this.valueMap）；
}

对于AngularJS使用

ng attr占位符

而不是

[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

是默认占位符。

不要忘记将表达式包装在

{}

括号中。