угловой автозаполнение материала

Question

Пожалуйста, помогите мне исправить мою ошибку. Я хочу добавить autocomplete материал с фильтром в мою форму.

.ts file:

  contactArray;
  selectedContact: IContact;
  myControl = new FormControl();
  filteredContact: Observable<string[]>;

  constructor(private contactservice:ContactService,private _snackBar: MatSnackBar) { }

  ngOnInit() {

    this.filteredContact = this.myControl.valueChanges
    .pipe(
      startWith(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.contactArray.slice())
    );
    this.contactservice.getcontacts().subscribe(
      Response=>this.contactArray=Response
          );
  }
  displayFn(user?: IContact): string | undefined {
    return user ? user.name : undefined;
  }

  private _filter(name: string): IContact[] {
    const filterValue = name.toLowerCase();

    return this.contactArray.filter(contact => contact.name.toLowerCase().indexOf(filterValue) === 0);
  }
}

и мой html файл:

<mat-card>
  <form class="example-form">
    <mat-form-field class="example-full-width">
      <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let contact of filteredContact | async" [value]="contact">
          {{contact.name}}{{contact.family}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </form>
</mat-card>

мой интерфейс:

export interface IContact {
    cid:number;
    name:string;
    family:string;
    email:string;
    phone:number;
}

my service для чтения на json-сервере:

  url="http://localhost:3000/contacts";

  constructor(private http:HttpClient) { }

  getcontacts(){
    return this.http.get(this.url);
  }

  addcontacts(contact:IContact){
    return this.http.post(this.url,contact);
  }
}

моя ошибка:

ОШИБКА TypeError: Невозможно прочитать свойство 'slice' из неопределенного

Answer 1

Сообщение об ошибке «Невозможно прочитать свойство« slice »из неопределенного» о том, что значение переменной «contactArray» не является массивом.

Попробуйте объявить тип переменной «contactArray» как Array, какэто:

ваш файл TS:

 contactArray: Array<Object> = [];
  selectedContact: IContact;
  myControl = new FormControl();
  filteredContact: Observable<string[]>;

  constructor(private contactservice:ContactService,private _snackBar: MatSnackBar) { }

  ngOnInit() {

    this.filteredContact = this.myControl.valueChanges
    .pipe(
      startWith(''),
      map(value => typeof value === 'string' ? value : value.name),
      map(name => name ? this._filter(name) : this.contactArray.slice())
    );
    this.contactservice.getcontacts().subscribe(
      Response=>this.contactArray=Response
          );
  }
  displayFn(user?: IContact): string | undefined {
    return user ? user.name : undefined;
  }

  private _filter(name: string): IContact[] {
    const filterValue = name.toLowerCase();

    return this.contactArray.filter(contact => contact.name.toLowerCase().indexOf(filterValue) === 0);
  }
}