Question

我有一个模板

<ng-container *ngFor="let text of texts[i]; let j = index">{{text}}
  <input type="text">
      </ng-container>

我还有一个数组myWords

myWords = ['orange', 'blue', 'green'];

我如何像占位符一样插入这些单词，但仅限于特殊情况，例如

this.app-part

我的应用程序中有3个部分，但我想在第3部分中有占位符（来自myWords的单词），如果我有第1部分或第2部分 - 我不需要任何占位符

Answer 1

您可以使用the conditional operator ?: in JavaScript将属性placeholder设置为值或空字符串。将占位符设置为空字符串应与将其设置为大多数常见用例相同。

要访问正确的占位符值，您需要将index指定给本地模板变量j。

<ng-container *ngFor="let text of texts[i]; let j = index">
  {{ text }}
  <input type=text [placeholder]="condition ? myWords[j] : ''">
</ng-container>

Answer 2

我正在使用带有布尔值的类似情况。

<!-- if extraKilometers is true then I'll type 'Who?' else I'll type 'What?' -->
<textarea class="form-control input-wide-400" 
                              placeholder="{{extraKilometers ? 'Who?' : 'What?'}}" 
                              aria-label="distance" 
                              formControlName="description"
                              rows=2
                              id="transportDescription"></textarea>

在您的特定示例中，我将使用：

<ng-container *ngFor="let text of texts; let j = index">{{text}}
  <input type="text" placeholder="{{ myWords[j] }}" >
</ng-container>

这里是stackblitz demo，其中包含您使用此方法提供的信息

Answer 3

<ng-container *ngFor="let text of texts[i]; let j = index">{{text}}
  <input type="text" placeholder="{{variable}}"/>
</ng-container>

可以是你的答案......

Answer 4

对于正在寻找类似内容的任何人（例如我以前）-您还可以像这样从占位符调用方法：

[placeholder]="someMethod() ? 'placeholder1' : 'placeholder2'"

如何在Angular2中为输入占位符编写* ngIf？

4 个答案: