автозаполнение и ввод не отображаются правильно, что-то не так с моей формой - PullRequest
1 голос
/ 07 февраля 2020

Я получил формат автозаполнения от: 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 внутри, но это не работает, даже когда я вынимаю их

в моем модуле .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 в навыках, но не исчезло полностью, кроме того, вы видите, что меню опций не т появляются. Бэкэнд правильно извлекает информацию. Вот изображение входа не работает

Placeholder mess up

...