Автозаполнение материалов не отображается список при нажатии

Имею автозаполнение материалов.

Я делаю вызов ngrx для извлечения данных.

 //parentcomponent.ts
 this.store.select(fromStore.getSearchFormStateMessageTypeListData).subscribe(msgTypeList => {
  if (msgTypeList.length > 0) {
    console.log('msgtypelist ='+msgTypeList)
    for (var i = 0; i < msgTypeList.length; i++) {
      this.messageTypeList.push(msgTypeList[i]);
    }
  }
  else {
    this.store.dispatch(new fromStore.GetGlobalSearchMessageTypeList({}));
  }
})


//parentcomponent.html

 <mat-card style="margin: 1px;">
    <search-form [messageTypeList]="messageTypeList"  (onSearchData)="searchButtonClick($event)" [rowData]="rowData | async">
   </search-form>
</mat-card>

От родителя я передаю msgTypeList дочернему элементу.

В дочернем я привязываю автозаполнение к списку, но список ничего не отображает, когда мы щелкаем внутри.

Он отображает параметры только тогда, когда мы вводим что-то в поле ввода (которое фильтрует параметры)

 //childcomponent.html
 <form [formGroup]="searchForm" id="searchForm" style="width:100%;height:70%" (ngSubmit)="onSubmit()">
<tr>
<td class="input-form" style="padding-right:4%;width:10%">
   <mat-form-field>
     <input type="text" placeholder="Message Type" aria-label="Assignee"  formControlName="msgType" matInput [matAutocomplete]="autoMsgType">
     <mat-autocomplete #autoMsgType="matAutocomplete" placeholder="Message Type" [displayWith]="displayMessageTypeFn">
          <mat-option *ngFor="let messageType of filteredMessageTypeList | async | sort:'msgType'" [value]="messageType">{{messageType.msgType}}</mat-option>
       </mat-autocomplete>
  </mat-form-field>
 </td>
</tr>
</form>

Ниже находится файл child.ts

   //childcomponent.ts
searchForm: FormGroup;

  ngOnInit() {
this.searchForm = this.formBuilder.group({
      direction: [null],
      msgType: [null, Validators.nullValidator],
     });
    this.filterMessageTypeLists();
     }



filterMessageTypeLists() {
    this.filteredMessageTypeList = this.searchForm.controls['msgType'].valueChanges.pipe(
      startWith<string | any>(''),
      map(value => typeof value === 'string' ? value : value.msgType),
      map(msgType => msgType ? this._msg_filter(msgType, this.messageTypeList) : this.messageTypeList.slice())
    );
  }


     private _msg_filter(msgType: string, lists: any[]): any[] {
    const filterValue = msgType.toLowerCase();
    return lists.filter(option => option.msgType.toLowerCase().includes(msgType.toLowerCase()))
      }

  displayMessageTypeFn(field?: any): string | undefined {
return field ? field.msgType : undefined;;
 }

Проблема в том, что если я нажимаю на поле автозаполнения, он должен открывать список, но ничего не отображается

No list is shown

Однако, если мы введем что-нибудь в поле ввода, отобразятся параметры. List is shown

Мне пришлось сначала установить пустую строку в formControl, чтобы отобразить раскрывающийся список автозаполнения, прежде чем вводить что-либо в нем: this.searchForm.controls['msgType'].setValue('');

mota 18.06.2019 13:33
7
1
8 306
5

Ответы 5

Привяжите событие щелчка к вводу в вашем html и вызовите функцию для события щелчка. Что-то вроде этого:

<input type="text" placeholder="Message Type" aria-label="Assignee"  formControlName="msgType" 
    matInput [matAutocomplete]="autoMsgType" (click)="myFunc()" >

и в вашем ts-файле объявите логическую переменную и изначально установите для нее значение false. Допустим, это переменная bool.

Теперь напишите функцию myFunc() и просто переключите эту переменную, например:

this.bool = !this.bool;

Теперь в вашем теге matautocomplete просто установите для свойства panelOpen значение переменной bool следующим образом:

<mat-autocomplete #autoMsgType="matAutocomplete" placeholder="Message Type" [displayWith]="displayMessageTypeFn" 
     panelOpen="bool">

Вы можете установить для переменной bool значение false в какой-либо более поздней функции, чтобы она работала правильно.

Я нашел проблему, но мне нужно ее решить. Свойство изменения значения в функции filterMessageTypeLists запускается только при вводе некоторого значения в поле ввода. Мне нужно позволить этому списку загружаться при загрузке страницы

prabhat gundepalli 16.09.2018 05:25

вы можете использовать setvalue вместо valueChanges.

Harris 16.09.2018 20:31

У меня такая же проблема.

Убедитесь, что this.messageTypeList содержит значения во время вызова map ()

Моя проблема заключалась в том, что в моем массиве ничего не было, поэтому он был пустым.

ngOnInit() {
// I subscribed to messageTypeList; 
// Then I did my control.onValueChanged( map... map...);
}

Должен быть

ngOnInit() {
  ObservableList.subscribe(array => {
     messageTypeList = array;
     control.onValueChanged( // do your mapping filter stuff);
  });
}

Пока в вашем списке есть значения, они должны отображаться.

Вам просто нужно вызвать form.valueChanges сразу после получения ваших данных, а не выполнять его в функции init следующим образом:

this.data1.getArticleS().subscribe(a => {
        this.tabArticle = a;
        console.log(a);
        this.filteredArticles = this.stockForm.get('article').valueChanges //erreur angular qui fonctionne bug interpreter ?
            .pipe(
                startWith(''),
                map(value => typeof value === 'string' ? value : value.name),
                map(name => name ? this._filter(name) : this.tabArticle.slice()));

    });

Я использовал

<mat-option *ngFor="let option of filteredRecipients | async" ...

с участием

ngOnInit(): void {
    this.filteredRecipients = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this.chatService.filterForAutoComplete(value))
      );
 }

Проблема заключалась в том, что мое представление (и, следовательно, this.filteredRecipients) рендерилось до того, как this.chatService фактически получил список получателей, которых функция карты пытается захватить. Поэтому вместо этого я использовал следующее, чтобы убедиться, что получатели заполнены до запуска функции карты.

В моем распоряжении:

private vAllRecipientsPopulatedSubject = new Subject<any>();
public allRecipientsPopulated$ = this.vAllRecipientsPopulatedSubject.asObservable();
public setRecipients(rcpts: RecipientModel[]) {
    const callback = () => {
      this.vAllRecipientsPopulatedSubject.next();
    };
    this.vAllRecipients = [];
    let itemsProcessed = 0;
    rcpts.forEach(element => {
      this.vAllRecipients.push(element);
      itemsProcessed++;
      if (itemsProcessed === rcpts.length) {
        callback();
      }
    });
}

В моем контроллере

this.filteredRecipients = combineLatest([this.myControl.valueChanges.pipe(startWith('')), this.chatService.allRecipientsPopulated$])
  .pipe(
    map(([changes, notused]) => this.chatService.filterForAutoComplete(changes))
  );

вы можете просто установить значение searchForm в хуке жизненного цикла ngAfterViewInit

ngAfterViewInit (): void { this.searchForm .setValue (''); }

Другие вопросы по теме