有条件地在Angular 2或4中使输入字​​段只读:建议+最佳/哪种方式

Question

我试图回答别人的问题.在这样做的过程中,我意识到在一些事情上存在着相当多的不确定性.我希望有人可以提供关于编号点的反馈1..4:

任务:有条件地使输入字段只读

HTML的相关部分:

<input type="text" placeholder="Club Name" #clubName>

将其添加到Typescript组件.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

不得不说这对我来说是个灰色地带.

1. 引用HTMLInputElement或Element直接使用@ViewChildAngular 2+是一种不好的做法吗？只是,我一直在使用经常看到的例子ElementRef或链接关闭以nativeElement从ElementRef.

由于VS Studio没有那些智能感,我突然觉得我在黑暗中编码.即,你永远不会得到关于方法setAttribute或removeAttribute的反馈,他们的参数要求等(我知道As也投了)

---

2. 然后,在查看文档后,我怀疑您可以直接在HTML模板中的输入上执行此操作:

---

<input [attr.readonly]= "isReadOnly">

IIRC我认为你必须用一个属性get in Typescript这样做:

get isReadOnly() :boolean {
}

这种方式有效吗？

---

3. 我想知道,您是否也可以在HTML模板中执行方法语法:

---

<input [attr.readonly]= "isReadOnly()">

打字稿

isReadOnly() :boolean {
}

这种方式有效吗？

---

总之,什么是最好的方法？

更新:还有*ngIF,因此您输出两个具有相同名称的输入元素之一.但这对我来说听起来就像一把大锤要破解坚果.

Answer 1

您需要使用以下(Angular 4):

<input [readonly]="isReadOnly">

如果使用,att.readonly则输入将始终为只读,因为readonly即使其值为false,该属性也将存在.通过使用[readonly]Angular,只会将属性if置isReadOnly为true.

在HTML中,以下内容足以使输入为只读:

<input readonly>