Question

我编写了一个HTML块，我需要能够动态呈现。因此，HTML就像我想要的那样工作并显示我期望看到的内容。这是HTML，它位于元素内部：

<div style="width: 550px;">
    <div style="height: 40px; float: left; width: 25%;" >
        <ul data-dropdown data-value class='bx--dropdown' tabindex='0'>
            <li class='bx--dropdown__menu-text'>HTTP</li>
            <li>
                <svg class='bx--dropdown__arrow'>
                    <use xlink:href='/assets/img/bluemix-icons.svg#caret--down'></use>
                </svg>
            </li>
            <li>
                <ul class='bx--dropdown__list'>
                    <li data-option data-value='grpc' class='bx--dropdown__list-item'><a class='bx--dropdown__link' href='javascript:void(0)'>gRPC</a></li>
               </ul>
           </li>
        </ul>
    </div>
    <div style="height: 40px; float: left; margin-left: 10px; width: 60%;">
        <input id='text1' type='text' class='bx--text__input' placeholder='Hint text here'>
    </div>
    <div style="float: left; margin-top: 5px; width: 10%;">
        <button style="height: 40px" data-copy-btn class='bx--btn--copy'>
            Copy
            <svg class='bx--btn--right-icon__icon'>
                <use class='bx--btn--right-icon__use' xlink:href='/assets/img/bluemix-icons.svg#copy--code'></use>
            </svg>
            <div class='bx--btn--copy__feedback' data-feedback='Copied!'></div>
        </button>
    </div>
</div>

我将它存储在typescript文件中的函数只是一个将所有html作为字符串的return语句。

packageProtocolColumn() {
        return '<div style="width:550px;"><div style="height:40px; float:left;width:25%;">' +
                '<ul data-dropdown data-value class="bx--dropdown" tabindex="0"><li class="bx--dropdown__menu-text">HTTP</li>' +
                '<li><svg class="bx--dropdown__arrow"><use xlink:href="/assets/img/bluemix-icons.svg#caret--down"></use>' +
                '</svg></li><li><ul class="bx--dropdown__list"><li data-option data-value="grpc" class="bx--dropdown__list-item">' +
                '<a class="bx--dropdown__link" href="javascript:void(0)">gRPC</a></li></ul></li></ul></div><div style="height: 40px;' +
                'float:left;margin-left:10px;width:60%;"><input id="text1" type="text" class="bx--text__input" placeholder="Hint text here">' +
                '</div><div style="float: left;margin-top:5px;width:10%;"><button style="height:40px" data-copy-btn class="bx--btn--copy">' +
                'Copy<svg class="bx--btn--right-icon__icon"><use class="bx--btn--right-icon__use" xlink:href="/assets/img/bluemix-icons.svg#copy--code">' +
                '</use></svg><div class="bx--btn--copy__feedback" data-feedback="Copied!"></div></button></div></div>';
}

我在typescript文件中调用该函数，使html可用于循环，然后按如下方式呈现：

<td *ngFor="let column of row; let colIndex=index"><div [innerHtml]="column"></div></td>

所有其他列都正确呈现，而且这一列部分呈现但不完全呈现。我将使用Chrome调试器的输出html与使用Beyond Compare的手写html进行了比较，并将单引号＆＃39; ＆＃39; vs双引号＆＃34; ＆＃34;，由于tslint设置，它们看起来完全相同。

任何人都知道我做错了什么？如果我无法解决这个问题，那么我必须至少创建两次此表，我更喜欢充分利用Angular 2，这样我只需要创建一次。

提前致谢。

Angular 2 - 变量内的HTML无法正常显示

0 个答案: