Question

我在软件的许多地方都使用了[@ng-select/ng-select][1]组件。效果很好，它会在用户输入时通过后端方法进行搜索，并显示要选择的结果。

现在，我想让用户创建不在列表中的新项目。如何使用异步列表执行此操作？ productNames是Observable。

<ng-select [name]="'productname'+index$" [items]="productNames | async"
        [attr.id]="'productname'+index$" 
        [(ngModel)]="detail.productNameNew" 
        [typeahead]="productNameInput" 
        (change)="productNameChanged($event, detail)"
        (keydown)="productNameKeyPress($event, detail)"
        [disabled]="currentSuggestion.acceptUser === null ? null : true"
        [clearable]="false">
    <ng-template ng-label-tmp let-item="item">
        {{item.productName}}
    </ng-template>
    <ng-template ng-option-tmp let-item="item">
        <div class="noproduct-item">
                <div class="noproduct-head">
                    <div class="productname">{{item.productName}}</div>
                    <div class="description">{{item.description}}</div>
                </div>
                <div class="noproduct-details">
                <div class="headid">
                    <span class='glyphicon glyphicon-send'></span>
                    {{item.suggestionHeadId}}
                </div>
                <div class="createduser">
                    <span class='glyphicon glyphicon-user'></span>
                    {{item.createUser?.name}}
                </div>
                <div class="createddate">
                    <span class='glyphicon glyphicon-calendar'></span>
                    {{item.createDate | date: 'yyyy.MM.dd.'}}
                </div>
            </div>
        </div>
    </ng-template>
</ng-select>

Answer 1

添加第二个可观察对象以捕获用户添加的产品，然后使用CombineLatest合并它们。订阅组合列表将产生一个新列表，您可以在ng-select中使用它。 https://stackblitz.com/edit/angular-rxjs-combinelatest

ng-select使用异步搜索添加新选项

1 个答案: