Comment utiliser angulaire du matériel 6 de saisie semi-automatique avec le serveur de données

Je suis l'élaboration d'une simple page Angulaire 6 et Matériel 6. Je veux récupérer des données à partir d'un service à l'aide de la saisie semi-automatique de Matériel, mais je ne sais pas comment le faire bien.

De l'officiel exemple https://material.angular.io/components/autocomplete/overview je ne comprends pas comment utiliser un service pour l'intégrer à la saisie semi-automatique.

Quelqu'un peut-il m'aider?

Grâce

  • avez-vous de tout service qui retourne déjà données filtrées ?
  • Oui! Je suis en train de construire un POC et je suis en utilisant un service de retour des données fausses pour l'instant. Dans l'avenir, ce service sera une vraie, avec la définition de déclarer dans cette partie.
  • Merci @Yousef pour votre rapide réponse!
InformationsquelleAutor zippo | 2018-06-01
  1. 3

    Enfin, j'ai trouvé une solution à ce que je voulais faire!
    Pour lier un FormArray de tapis-table de source de données, vous devez:
    Brièvement, l'exemple est: est-ce

    <table mat-table [dataSource]="itemsDataSource">
  <ng-container matColumnDef="itemName">
    <td mat-cell *matCellDef="let element">{{ element.value.material?.name }}</td>
  </ng-container>
  <ng-container matColumnDef="itemCount">
    <td mat-cell *matCellDef="let element">{{ element.value.itemCount }}</td>
  </ng-container>
  <tr mat-row *matRowDef="let row; columns: itemColumns;"></tr>
</table>

    et le code:

    export class ItemListComponent implements OnInit {
  constructor(
    private fb: FormBuilder
  ) { }
  itemColumns = ['itemName', 'count'];
  itemForm: FormGroup;
  itemsDataSource = new MatTableDataSource();
  get itemsForm() {
    return this.itemForm.get('items') as FormArray;
  }
  newItem() {
    const a = this.fb.group({
      material: new FormControl(), //{ name:string }
      itemCount: new FormControl() //number 
    });
    this.itemsForm.push(a);
    this.itemsDataSource._updateChangeSubscription(); //neccessary to render the mat-table with the new row
  }
  ngOnInit() {
    this.itemForm = this.fb.group({
      items: this.fb.array([])
    });
    this.newItem();
    this.itemsDataSource.data = this.itemsForm.controls;
  }
}
    InformationsquelleAutor zippo
  2. 1

    Vous suffit de remplir le options à partir des données du serveur dès que l'utilisateur change la valeur d'entrée.

    <input type="text" matInput (input)="onInputChanged($event.target.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">{{ option.title }}</mat-option>
</mat-autocomplete>

    Dans votre fichier de composant, vous devez gérer onInputChanged(searchStr), et options.

    onInputChanged(searchStr: string): void {
    this.options = [];
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
    this.subscription = this.yourService.getFilteredData(searchStr).subscribe((result) => {
        this.options = result;
      });
    }
    InformationsquelleAutor Yousef khan
  3. 1

    bien supposons u retour ur de données à partir du serveur en tant qu'Objets avec une structure comme IyourAwesomeData et pour les besoins de cet exemple, nous allons utiliser le champ abc pour filtrer les données

    so ur ts composant devrait ressembler à qqch comme ceci: 

    import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { startWith, debounceTime, map, switchMap, distinctUntilChanged } from 'rxjs/operators';
import { Subscription } from 'rxjs';

interface IyourAwesomeData {
 someName: string; 
 someField: string;
 someOtherField: number;
}

export class YourAutcompleteComponent implements OnInit, OnDestroy {

  dataFiltered: IyourAwesomeData[]; //this data will be used inside HTML Template
  data: Observable<IyourAwesomeData[]>; 
  yourInputCtrl = new FormControl();
  private sub: Subscription;

  constructor() {}

  ngOnInit() {
    this.data = ??? //Pass your data as Observable<IyourAwesomeData[]>;
    this.sub = this.yourInputCtrl.valueChanges
      .pipe(
        debounceTime(500),
        distinctUntilChanged(), 
        startWith(''),
        switchMap((val) => {
          return this.filterData(val || '');
        })
      ).subscribe((filtered) => {
        this.dataFiltered = filtered;
      });
  }

  ngOnDestroy() {
     this.sub.unsubscribe();
  }

  filterData(value: string) {
    return this.data //like IyourAwesomeData[]
      .pipe(
        map((response) => response.filter((singleData: IyourAwesomeData) => {
          return singleData.someName.toLowerCase().includes(value.toLowerCase())
        })),
    );
  }
}

    et ur HTML modèle devrait ressembler à qqch comme ceci:

    <mat-form-field>
  <input matInput placeholder="some placeholder" [matAutocomplete]="auto" [formControl]="yourInputCtrl">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let single of dataFiltered" [value]="single.someName">
      {{ single.someName }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
    • Je vais essayer cette solution et, plus tard, je vous dis la veredict 😉
    • où vous ave souscrit l'api résultat?
    • À l'intérieur de ngOnInit(), mais je n'ai pas de pouvoir s'inscrire à ces données juste de lui attribuer.les données Observables, par exemple, j'ai été à l'aide de firebase, dans mon service, j'ai été geting des données de cette getData(): Observables<IyourAwesomeData[]> { return this.someColection.valueChanges(); } et à l'intérieur de ngoninit cette.données = ce.myService.getData();
    InformationsquelleAutor Annon_MS