Angular 4中Label文本绑定问题：如何更新Label文本？

你遇到的核心问题是你使用的<Label>元素并不支持text属性绑定，Angular无法识别这个属性，所以才抛出了模板解析错误。我们一步步来解决这个问题：

1. 先明确你用的是什么Label元素 #

分两种常见情况针对性处理：

情况一：原生HTML的<label>标签 #

原生HTML里的标签是小写的<label>，它本身就没有text这个属性——原生标签的文本是直接放在标签内部的，不是通过属性传递的。

把你的HTML代码改成下面这样就能正常工作了：

<label class="ad-label" textWrap="true">{{ labelText }}</label>

TS代码不需要修改，保持原来的即可：

labelText: any = 'Month';

之后你更新labelText变量时，标签内的文本会自动同步，和你用<a>标签时的效果完全一致。

情况二：自定义/UI框架的Label组件（比如Ionic的ion-label） #

如果你用的是某个UI框架（比如Ionic）的标签组件，或者自己编写的自定义Label组件：

• 如果是Ionic的ion-label，正确用法是把文本放在组件内部，同时注意Ionic的属性命名是短横线格式的text-wrap，不是驼峰式的textWrap：

  <ion-label class="ad-label" text-wrap="true">{{ labelText }}</ion-label>
  

• 如果是你自己写的自定义Label组件，需要在组件类里给text添加@Input()装饰器，让Angular识别它为可绑定的输入属性：

  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'Label',
    template: '<span>{{ text }}</span>'
  })
  export class LabelComponent {
    @Input() text: any;
    @Input() textWrap: boolean;
  }
  

  做完这个修改后，你原来的绑定写法就能正常生效了。

为什么<a>标签能正常工作？ #

因为你给<a>标签用的是内部文本插值，而不是属性绑定——<a>{{ labelText }}</a>是把变量值作为标签的内容，这是Angular默认支持的写法，和原生HTML的行为一致，所以不会触发错误。

内容的提问来源于stack exchange，提问作者Samaludheen