Angular 9 - 属性未定义绑定

Question

我有一个名为 CustomTextBox 的组件

在我的CustomTextBox.ts中，写成

@Input('id') _id:string
@Input('class') _class:string

在我的CustomTextBox.htm中，通过使用属性绑定，写成

<textarea [id]="_id" [class]="_class"></textarea>

我可以从应用程序组件中调用以下任一选项的组件

<CustomTextBox></CustomTextBox>
  <CustomTextBox id="sampleid"></CustomTextBox>
  <CustomTextBox class="sampleid"></CustomTextBox>

id 和 class 是可选的

但是调用时<CustomTextBox></CustomTextBox>生成如下代码

<CustomTextBox id="undefined" class="undefined"></CustomTextBox>

如果值为空或未定义，我如何使属性成为可选值

Stackbitz 解决方案

Answer 1

尝试将其写入您的模板

<textarea [attr.id]="_id?_id:null" [attr.class]="_class?_class:null"></textarea>

这将检查您的 _id 和 _class 是否已设置，如果未设置，return 值将是 null，这将具有删除属性，因此不显示未定义的值。

Answer 2

您可以像任何其他属性:

一样为您的 @Input 添加默认值

@Input('id') _id:string = "defaultId";
@Input('class') _class:string = "defaultClass"

当 @input 值为 undefined 时，它将采用默认值。

如果你想在没有提供 _id 或 _class 的情况下完全隐藏 CustomTextBox 你可以尝试：

showTextBox: boolean = false;

ngOnInit(): void {
    if(_id !== undefined && _class !== undefined){
         showTextBox= true;
    }
}

并在您的 html 文件中：

<CustomTextBox *ngIf ="showTextBox"></CustomTextBox>

Angular 9 - Property Binding with undefined