Question

我已经设计了角度自动完成组件，作为可在其他组件中重用的组件。但是我无法将其作为其他组件中的必填字段。请帮助我，如何使此自动完成功能在其他组件中成为必需组件？任何帮助，将不胜感激。

dynamic-select.html页面用于自动完成。

<mat-form-field class="select-full-width">
    <input (change)='sendMessage($event)' type="text" [placeholder]="placeholder" aria-label="Assignee" matInput
           [formControl]="selectControl" [matAutocomplete]="auto" [value]="selectedValue && (selectedValue.Name && selectedValue.Name || '') || '' ">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction"
                      (optionSelected)='sendMessage($event.option.value)'>
        <mat-option *ngIf="isLoading" class="is-loading">
            <mat-spinner diameter="50"></mat-spinner>
        </mat-option>
        <ng-container *ngIf="!isLoading">
            <mat-option *ngFor="let data of filteredObject" [value]="data">
                {{data.Name }}
            </mat-option>
        </ng-container>
    </mat-autocomplete>
    <span class="ng-arrow-wrapper"><span class="ng-arrow"></span></span>
</mat-form-field>

自动完成的dynamic-select.ts文件

@Component({
    selector: 'app-dynamic-select',
    templateUrl: './dynamic-select.component.html',
    styleUrls: ['./dynamic-select.component.css']
})
export class DynamicSelectComponent implements OnInit {
    filteredObject: any;
    isLoading = false;

    @Output() messageEvent = new EventEmitter<string>();
    @Input('table_name') table_name: string;
    @Input('placeholder') placeholder: string;
    @Input() selectedValue: any;

    constructor(private fb: FormBuilder, private apiService: ApiService) {
    }

    selectControl = new FormControl();

    collectionGroupValueEventFun($event) {
        this.selectControl.setValue({Name: $event.Name});
    }

    ngOnInit() {

        if (this.selectedValue) {
            this.selectControl.setValue({Name: this.selectedValue.Name});
        }

        this.autoCompelte();
    }

     public autoCompelte() {
        this.selectControl.valueChanges
            .pipe(
                debounceTime(300),
                distinctUntilChanged(),
                tap(() => this.isLoading = true),
                switchMap(value => this.apiService.search
                    /* on selecting the value we are getting the object instead of name*/
                    (this.table_name, (value.Name && value.Name || value))
                        .pipe(
                            finalize(() => this.isLoading = false),
                        )
                )
            ).subscribe(data => {
            if (data['messages'] && data['messages']['data'] && data['messages']['data'].length > 0) {
                this.filteredObject = [];
                this.filteredObject = data['messages']['data'];
            } else {
                // this.filteredObject = data['messages'] ? data['messages']['data'] : [];
                this.filteredObject = [];
            }
        });
    }

    sendMessage(event) {
        if (event && event.target && event.target.value) {
            this.messageEvent.emit(event.target.value);
        } else {
            this.messageEvent.emit(event);
        }
    }

    displayFunction(data?: Collection): string | undefined {
        return data ? data.Name : undefined;
    }

}

Asset.Html ---我使用过此自动完成功能的文件。我怎样才能使它成为强制性的（在其他组件中）？

<mat-grid-tile [colspan]="1" [rowspan]="1">
    <div class="select-full-width">
        <app-dynamic-select table_name="collections" 
                            placeholder="Enter key to search and select Collection" 
                            [selectedValue]="collectionValue" 
                            (messageEvent)="receiveMessageFromCollection($event)">
        </app-dynamic-select>
    </div>
</mat-grid-tile>

我们如何使自动完成组件具有强制性，该组件将在另一个组件中使用？

0 个答案: