mat-autocomplete и ввод не отображаются правильно, что-то не так с моей формой
Я получил формат автозаполнения из: http://www.freakyjolly.com/angular-7-6-material-autocomplete-example-with-remote-server-side-results/
Мое поле ввода не стирает заполнитель при вводе чего-либо, а также параметры не отображаются. Похоже, что javascript правильный и правильно извлекает все из базы данных, но я не могу понять, почему ни один из них не работает. Я должен:
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule, MatFormFieldModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Я где-то читал, что у меня не должно быть операторов if внутри, но это не работает, даже когда я их вынимаю
в моем module.ts
Вот мой код:
html-код html-код
<div>
<br>
<form (click)="check(submitTag)" #submitTag="ngForm">
<mat-form-field>
<input matInput placeholder="skills" [matAutocomplete]="auto" [formControl]="searchTagsCtrl" type="text">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
[displayWith]="displayFn.bind(this)">
<mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
<ng-container *ngIf="!isLoading">
<mat-option *ngFor="let tag of filtered_tags" [value]="tag">
<span>({{tag.tag_name}})</span>
</mat-option>
</ng-container>
</mat-autocomplete>
</mat-form-field>
</form>
<br>
</div>
component.js
import { Component, OnInit } from '@angular/core';
import { FormControl, NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { debounceTime, tap, switchMap, finalize } from 'rxjs/operators';
import { TagService } from 'src/app/_services/tag.service';
@Component({
selector: 'app-tag',
templateUrl: './tag.component.html',
styleUrls: ['./tag.component.css']
})
export class TagComponent implements OnInit {
searchTagsCtrl = new FormControl();
filtered_tags: any;
isLoading = false;
errorMsg: string;
constructor(private http: HttpClient, private tagService: TagService) { }
ngOnInit() {
this.searchTagsCtrl.valueChanges
.pipe(
debounceTime(500),
tap(() => {
this.errorMsg = "";
this.filtered_tags = [];
this.isLoading = true;
}),
switchMap(value => {
if(value.hasOwnProperty('tag_name')){
return this.tagService.getTags( { 'token': localStorage.getItem('token') }, { 'tag': value.tag_name } )
.pipe(
finalize(() => {
this.isLoading = false
}),
)
}else{
return this.tagService.getTags( { 'token': localStorage.getItem('token') }, { 'tag': value } )
.pipe(
finalize(() => {
this.isLoading = false
}),
)
}
})
)
.subscribe(data => {
if (data['tags'].length == 0 ) {
this.errorMsg = data['message'];
this.filtered_tags = [];
} else {
this.errorMsg = "happy";
this.filtered_tags = data['tags'];
}
});
}
displayFn(tag) {
if (!tag) return '';
if(tag.hasOwnProperty('tag_id')){
console.log(tag)
}else{
console.log(tag)
}
}
check(form: NgForm){
console.log('check')
form.reset()
}
}
вы можете видеть, что я набрал A, и он перешел на S в навыках, но не исчез полностью, кроме того, вы видите, что меню параметров не появилось. Бэкэнд правильно извлекает информацию. Вот изображение неработающего ввода