如何在 Angular 中定义值时仅在 HTML 元素中显示 id 属性

Question

有一个简单的组件。有些用途需要输入字段上的 ID，有些则不需要。当值为假时，我不知道如何完全忽略 id 属性。这怎么办？

这就是我现在所拥有的：

<div class="form-group row">
  <label [for]="id ? id : ''" class="col-5 col-form-label">{{ label | translate }}:</label>
  <div class="col-7">
      <input type="text" readonly class="form-control-sm form-control-plaintext" [id]="id ? id : ''"
        [value]="value">
  </div>
</div>

但这会导致将其渲染为

<input type="text" readonly="" class="form-control-sm form-control-plaintext" id="">

对于 null 和未定义，文本字面上是 null 和未定义，所以这也不起作用。

我希望不必为此使用 *ngIf 。

Answer 1

解决此问题的一种方法是使用

attr

。如果您将

null

传递给它，该属性将从 HTML 中删除。

您的输入元素应如下所示：

<input [attr.id]="id || null" type="text" readonly class="form-control-sm form-control-plaintext" [value]="value">

此更新的 HTML 使用 逻辑 OR 运算符 来检查

id

是否为“假”。如果是这种情况，则

null

会被传递，并且使用

[attr.id]

时，

id

不会在 DOM 中渲染（使用 Angular 14 进行测试）。
有关此主题的更多信息，请查看@user13258211提到的SO问题：How to add conditional attribute in Angular 2?