如何在 Angular 2 的 ng2-tag-input 下拉列表中添加按钮？答案

【问题标题】：how to add a button to angular 2's ng2-tag-input dropdown?如何在 Angular 2 的 ng2-tag-input 下拉列表中添加按钮？
【发布时间】：2017-06-13 12:43:08
【问题描述】：

我正在尝试使用 ng2-tag-input 为我的下拉菜单创建自定义模板。我以此为参考：this link。我已经使用 observable 检索了一个对象数组并填充了下拉列表。

这是我的 html 代码（还没有按钮）：

<div class="users-container">
<tag-input [ngModel]="[]" [style.width]="100" theme="bootstrap" [onlyFromAutocomplete]="false" addOnBlur="true" addOnEnter="true" addOnSpace="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteObservable]='autocompleteItems$' [identifyBy]="'id'" [displayBy]="'name'">
        <!--custom template-->
        <ng-template let-item="item" let-index="index">
            <div class="float-left">
                <img class="user-image" src="{{item.photo}}" alt="user-image">
            </div>
            <div class="float-right">
                <span class="name">{{item.name}}</span>
                <span class="name">{{item.lname}}</span>
                <p>( {{item.dept}} )</p>
            </div>
            <div class="clear"></div>
        </ng-template>
    </tag-input-dropdown>
</tag-input>

我能够成功获取我的自定义模板，但我还需要显示两个按钮以及下拉值，例如：the custom template repeats and at the end, there are these 2 buttons I need。我不知道如何添加它们，因为我是 Angular2 的新手。任何帮助将不胜感激。

【问题讨论】：

标签： html angular ng-template ng2-tag-input

【解决方案1】：

<tag-input [ngModel]="[]" [style.width]="100" theme="bootstrap" [onlyFromAutocomplete]="false" addOnBlur="true" addOnEnter="true" addOnSpace="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteObservable]='autocompleteItems$' [identifyBy]="'id'" [displayBy]="'name'">
        <!--custom template-->
        <ng-template let-item="item" let-index="index">
            <div class="float-left">
                <img class="user-image" src="{{item.photo}}" alt="user-image">
            </div>
            <div class="float-right">
                <span class="name">{{item.name}}</span>
                <span class="name">{{item.lname}}</span>
                <p>( {{item.dept}} )</p>
            </div>
            <div class="clear"></div>
        </ng-template>

    </tag-input-dropdown>
    <button>Cancel</button>
    <button>Send</button>
</tag-input>

上面的代码对你不起作用？？

【讨论】：

不，不幸的是它不能解决我的问题。 我只想要下拉菜单中的按钮。您的代码将在输入框下方显示默认按钮。下拉列表中的所有内容都必须包含在 <tag-input-dropdown></tag-input-dropdown> 中
如果你把按钮语句放在<tag-input-dropdown></tag-input-dropdown>里面会怎么样
它不会出现在 DOM 中。只有<ng-template></ng-template> 中的任何内容都会出现，<ng-template> 就像一个重复的 DOM 元素，所以如果我在<ng-template> 中添加按钮，它将在每个下拉元素中重复。