如何为span Angular 6设置ngModel?

3 html typescript angular angular6

HTML5

<div class="row rating" style="float:right;">
     <span class="fa fa-star"  name="val1" [(ngModel)]="data.val1"></span>
</div>
Run Code Online (Sandbox Code Playgroud)

TS

data = {
 val1 = ''
}
Run Code Online (Sandbox Code Playgroud)

注意:我需要一个唯一的名称。我想使用星级系统。我只想知道名字。

小智 7

方法

插值法

<div class="row rating" style="float:right;">
     <span class="fa fa-star"  name="val1">{{data.val1}}</span>
</div>
Run Code Online (Sandbox Code Playgroud)

属性绑定

<div class="row rating" style="float:right;">
     <span class="fa fa-star"  name="val1" [innerHTML]="data.val1"></span>
</div>
Run Code Online (Sandbox Code Playgroud)

当将数据值呈现为字符串时,没有技术原因优先选择一种形式而不是另一种形式。你倾向于可读性,这往往有利于插值。您建议建立编码风格规则并选择既符合规则又对手头任务感觉最自然的形式。

笔记:

Angular NgModel 指令是一个桥梁,可以实现双向绑定以形成元素。

模板语法