ng-select重置时不清除并且不显示加载文本

Question

我正在使用ng-select来选择形成大量项目，所有项目都工作正常，这意味着它可以很好地填充，然后填充可以提交的表单元素。

我有两个问题，找不到解决方案。

1）加载文本-应该显示，而ajax会带回所需的数据-不会显示-我一直在等待，没有UX反馈。我不知道为什么。

2）更重要的是-当我在表单上进行重置时-ng-select字段不清除，先前的选择仍然保留。

下面的

是影响ng-select的所有代码。为了简洁起见，我删除了其他表单字段。

非常感谢您的帮助。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import { CatalogService } from '../../services/catalog.service';

@Component({
    selector: 'app-search',
    template: `
        <form  novalidate="novalidate"
            autocomplete="off"
            [formGroup]="form"
            (ngSubmit)="submitForm()" >

        Book Search

        <label>Composition:</label>

        <ng-select [class.state-error]="showError('book_title')"
            name="book"
            bindLabel="title"
            [items]="catalog"
            (change)="changeBook($event)"
            placeholder="Name of Book"
            loadingText="Loading, please wait...">

            <ng-template ng-label-tmp let-item="item">
                <b>{{item.title}}</b> <small>( {{item.author}} )</small>
            </ng-template>

            <ng-template ng-option-tmp let-item="item">
                <div><b>Title:</b> {{item.title}} <small>( {{item.group}} )</small></div>
                <small><b>Publisher:</b> {{item.publishername}} | {{item.author}} | {{item.year_published}}</small>
            </ng-template>          

        </ng-select>

        <button type="submit" class="btn btn-sm btn-primary" (click)="submitAttempted = true" >Submit</button>              
        <button type="button" class="btn btn-default" (click)="resetForm()" >Reset</button>         

    </form> `
})

export class SearchComponent implements OnInit {

    book_id: string;
    book_title: string;

    form: FormGroup;
    loading = false;
    submitAttempted = false;

    constructor(private catalogService: CatalogService) {}

    get formDisabled () {
        return this.loading === true;
    }

    get formModel () {
        return {
            book_id: this.form.get('book_id').value,
            book_title: this.form.get('book_title').value
        };
    }

    ngOnInit() {
        this.form = new FormGroup({
            book_id: new FormControl(
                {
                    value: this.model.book_id,
                    disabled: this.formDisabled,
                }
            ),
            book_title: new FormControl(
                {
                    value: this.model.book_title,
                    disabled: this.formDisabled,
                }
            ),
            book: new FormControl()
        });

    }

    changeBook (book) {
        this.form.get('book_id').patchValue(book._id ? book._id : null);
        this.form.get('book_title').patchValue(book.title ? book.title : null);
        return ;
    }

    resetForm () {
        this.form.get('book_id').patchValue(null);
        this.form.get('book_id').markAsUntouched();
        this.form.get('book_title').patchValue(null);
        this.form.get('book_title').markAsUntouched();
        this.submitAttempted = false;
    }

    submitForm() { // console.log( 'Form Submitted', this.formModel );
        this.loading = true;
        ...
    }

    showError (fieldName: string) {
        const field = this.form.get(fieldName);
        this.googleAnalyticsEventsService.emitEvent('Public', 'Form Submition', 'Recruiter Search Form FormField: ' + this.form.get(fieldName), 19300);
        return field.invalid && (field.touched || this.submitAttempted);
    }

}