html - 在 Typescript Angular 2 中设置 HTML 空格代码

Question

我只是一个关于如何在 html 中将空间设置为我的值的问题。 我有代码:

    setValuetoComboBox(test:string, lvl:number){
    let lastTest:string;
    let spaceString:string;
    // 
    spaceString='&#160';
    for(var i = 1; i <= lvl; i++){
        spaceString=spaceString + '&#160';
    }
    lastTest = spaceString + test;
    return lastTest;
}

在这段代码中，我有   来在 html 中腾出空间。我有 html 代码:

                                    <select [formControl]="parent" class="form-control">
                                    <option value="-1">Root</option>
                                    <option value="{{test.id}}" *ngFor="let test of parentValue">
                                        {{setValuetoComboBox(test.name, test.lvl)}}
                                    </option>
                                </select>

结果是:

The Result

这是错误的结果，我想要空间而不是代码 。有人能找到我的问题的答案吗？

Answer 1

我猜你真正想要的是

<option value="{{test.id}}" *ngFor="let test of parentValue"
    [innerHTML]="setValuetoComboBox(test.name, test.lvl)">
</option>

使用 {{ }} 将插入文字字符串。

您可能需要使用 sanitizer 将其标记为安全，例如How to bind raw html in Angular2中所示

您应该意识到 setValuetoComboBox(...) 可能会被频繁调用(每次 Angular 运行更改检测时)。通常最好将调用结果分配到属性中并绑定(bind)到该属性，而不是绑定(bind)到函数。

因此，通常不鼓励绑定(bind)到 View 中的函数。它可能会导致严重的性能问题。