textarea的Angular2 maxLength作为变量答案

【问题标题】：Angular2 maxLength for textarea as variabletextarea的Angular2 maxLength作为变量
【发布时间】：2016-11-09 23:33:40
【问题描述】：

要为 textarea 设置最大字母数，我们通过以下方式实现： <textarea maxLength="50"></textarea>

但是，我可以执行以下操作吗？有什么办法吗？

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-create-offer-page',
  template: `
    <textarea maxLength="textareaLength"></textarea>
  `
})
export class CreateOfferPageComponent {
  textareaLength: number = 50;
}

我问是因为那行不通。

【问题讨论】：

标签： variables angular textarea

【解决方案1】：

您需要 [] 才能让 Angular 将其解释为绑定

 [maxLength]="textareaLength"

这应该适用于本机验证。 Angular2 验证器目前不支持动态值。

【讨论】：

谢谢。它就像一个魅力，但我注意到 attr.maxLength 也有效。是否有一些好的做法来添加 attr.在属性之前？
maxLength 是原生属性，因此可以直接与[maxLength] 绑定。例如，如果您想设置像data-id 这样的自定义属性，您可以使用与[attr.data-id] 的绑定。最后，这些原生属性并没有什么不同。
我明白了！谢谢您的帮助。祝你有美好的一天。
如果没有[attr. 就无法工作，那么添加它;-)。大多数属性都会反映到 DOM，因此如果您设置属性，则会创建属性，反之亦然。对于其他人来说，这不起作用，例如 <lable for="...."> 不起作用，因为属性名称是 htmlFor 并且属性名称是 for。如果它是自定义组件或指令的@Input()，并且您在 DOM 上不需要它（例如用于 CSS 选择器），那么最好不要添加 [attr.，因为这意味着添加到 DOM比仅属性慢得多。
另见stackoverflow.com/questions/258469/…

【解决方案2】：

稍微扩展@rinukkusu 提供的答案，您甚至可以通过添加三元运算符来使属性可选，如下所示：

<textarea [attr.maxLength]="textareaLength > 0 ? textareaLength : null"></textarea>

null 值从元素中完全删除了该属性，这是我需要的。

【讨论】：

这就是我想要的。谢谢

【解决方案3】：

当然，这很容易 - 只需像这样使用属性绑定：

<textarea [attr.maxLength]="textareaLength"></textarea>

【讨论】：

非常感谢。我很遗憾我不能接受两个答案，但你迟到了大约 9 秒。但是，当然，为你指出:)