ng-select добавить новую опцию с асинхронным поиском - PullRequest
0 голосов
/ 31 мая 2019

Я использую компонент [@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>                   

1 Ответ

1 голос
/ 31 мая 2019

Добавьте вторую наблюдаемую информацию, чтобы захватить добавленные пользователем продукты, а затем используйте объединение, чтобы объединить их. Подписка на объединенный список создаст новый список, который вы можете использовать в ng-select. https://stackblitz.com/edit/angular-rxjs-combinelatest

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...