Question

我定义了两个输入字段，当我们按下键盘上的Enter键时它们会启动它们自己的方法：

<div class="row">
      <div class="col-md-12">
            <mat-form-field class="index-full-width col-md-11">
                    <input #autoCompleteContactInput
                            matInput
                            placeholder="Intervenant Interne"
                            aria-label="Intervenant Interne"
                            [matAutocomplete]="autoContact"
                            [formControl]="contactControl"
                            (keyup.enter)="getContacts($event)"
                       >
                       <mat-autocomplete (optionSelected)="selectContact()" #autoContact="matAutocomplete" [displayWith]="displayFnContact">
                          <mat-option *ngFor="let contact of filteredContacts | async" [value]="contact">
                             <span>{{ contact.nom }} - {{contact.prenom}}</span>
                          </mat-option>
                        </mat-autocomplete>
             </mat-form-field>
              <mat-progress-bar *ngIf="loadingcontact" mode="indeterminate"></mat-progress-bar>
     </div>
 </div>
 <br>
 <div class="row">
   <div class="col-md-12">
        <mat-form-field class="index-full-width col-md-11">
            <input #autoCompleteSiteInput
                   matInput
                   placeholder="Site"
                   aria-label="Site"
                   [matAutocomplete]="autoSite"
                   [formControl]="siteControl"
                  (keyup.enter)="getSites($event)"
          >
         <mat-autocomplete (optionSelected)="selectSite()" #autoSite="matAutocomplete" [displayWith]="displayFnSite">
               <mat-option *ngFor="let site of filteredSites | async" [value]="site">
                  <span>{{ site.libelle}}</span>
               </mat-option>
         </mat-autocomplete>
       </mat-form-field>
                            <mat-progress-bar *ngIf="loadingsite" mode="indeterminate"></mat-progress-bar>
  </div>
 </div>

方法是“ getContacts（$ event）”
方法是“ getSites（$ event）”

问题是当我在第二个输入字段上按Enter键时，总是调用getContacts ...

我不明白为什么，因为为每个字段定义了“ keyup enter”属性

*****编辑** 这是我的TS：

@ViewChild('autoCompleteContactInput', { read: MatAutocompleteTrigger} ) autoCompleteContact: MatAutocompleteTrigger;
@ViewChild('autoCompleteSiteInput', { read: MatAutocompleteTrigger} ) 
contactControl: FormControl = new FormControl();
    contactsList: Contact[];
    contactChoice: Contact;
    filteredContacts: Observable<any[]>;
    siteControl: FormControl = new FormControl();
    sitesList: Site[];
    siteChoice: Site;
    filteredSites: Observable<any[]>;

...

getContacts(event) {
        console.log('getContacts method');
        this.loadingcontact = true;
        const self = this;
        let searchTerm = '';
        console.log(event.target.value);
        console.log(this.contactControl.value);
        searchTerm = typeof (event.target.value) !== 'undefined' ? event.target.value :
            (typeof (this.contactControl.value) === 'object' ? this.contactControl.value.nom :this.contactControl.value);
        console.log('recherche: ' + searchTerm);

        this.myJarviaServices.getContactsBySaisie(searchTerm)
            .pipe(first())
            .subscribe(res => {
                    console.log(res);
                    this.contactsList = res.content;
                    if (this.contactsList.length === 0) {
                        const empty = {
                            nom: '** Aucun contact Trouvé ***'
                        } as Contact;
                        this.contactsList.push(empty);
                    }
                    console.log(this.contactsList);
                    this.filteredContacts = this.contactControl.valueChanges.pipe(
                        startWith<string | Contact>(''),
                        map(contact => typeof contact === 'string' ? contact : contact.nom),
                        map(name => name ? this.filterContact(name) : this.contactsList.slice())
                    );
                    this.loadingcontact = false;
                    self.autoCompleteContact.openPanel();
                },
                error => {
                    console.log('error subscribe: ' + error);
                });
    }
    getSites(event) {
        console.log('getSites method');
        this.loadingsite = true;
        const self = this;
        let searchTerm = '';
        console.log(event.target.value);
        console.log(this.siteControl.value);
        searchTerm = typeof (event.target.value) !== 'undefined' ? event.target.value :
            (typeof (this.siteControl.value) === 'object' ? this.siteControl.value.libelle :
            (this.siteControl.value !== null ? this.siteControl.value : "*"));
        console.log('recherche: ' + searchTerm);

        this.myJarviaServices.getSitesBySaisie(searchTerm)
            .pipe(first())
            .subscribe(res => {
                    console.log(res);
                    this.sitesList = res.content;
                    if (this.sitesList.length === 0) {
                        const empty = {
                            libelle: '** Aucun contact Trouvé ***'
                        } as Site;
                        this.sitesList.push(empty);
                    }
                    console.log(this.sitesList);
                    this.filteredSites = this.siteControl.valueChanges.pipe(
                        startWith<string | Site>(''),
                        map(site => typeof site === 'string' ? site : site.libelle),
                        map(name => name ? this.filterSite(name) : this.sitesList.slice())
                    );
                    this.loadingsite = false;
                    self.autoCompleteSite.openPanel();
                },
                error => {
                    console.log('error subscribe: ' + error);
                });
    }

日志：

****编辑（2）原始HTML文件：

<form [formGroup]="mediaForm">
      <div class="row">
           <div class="col-md-1">
                 <button mat-raised-button type="submit" (click)="getContacts($event)" class="btn btn-white btn-round btn-just-icon">
                    <i class="material-icons">search</i>
                     <div class="ripple-container"></div>
                 </button>
            </div>
            <div class="col-md-11">
                 <mat-form-field class="index-full-width col-md-11">
                       <input #autoCompleteContactInput
                             matInput
                             placeholder="Intervenant Interne"
                             aria-label="Intervenant Interne"
                             [matAutocomplete]="autoContact"
                            [formControl]="contactControl"
                            (keyup.enter)="getContacts($event)"
                                    >
                 <mat-autocomplete (optionSelected)="selectContact()" #autoContact="matAutocomplete" [displayWith]="displayFnContact">
                    <mat-option *ngFor="let contact of filteredContacts | async" [value]="contact">
                        <span>{{ contact.nom }} - {{contact.prenom}}</span>
                    </mat-option>
                 </mat-autocomplete>
             </mat-form-field>
            <mat-progress-bar *ngIf="loadingcontact" mode="indeterminate"></mat-progress-bar>
        </div>
     </div>
     <br>
     <div class="row">
           <!--<div class="col-md-1">-->
             <!--<button mat-raised-button type="submit" (click)="getSites($event)" class="btn btn-white btn-round btn-just-icon">-->
              <!--<i class="material-icons">search</i>-->
                   <!--<div class="ripple-container"></div>-->
             <!--</button>-->
           <!--</div>-->
            <div class="col-md-11">
                 <mat-form-field class="index-full-width col-md-11">
                     <input #autoCompleteSiteInput
                            matInput
                           placeholder="Site"
                            aria-label="Site"
                           [matAutocomplete]="autoSite"
                           [formControl]="siteControl"
                           (keyup.enter)="getSites($event)"
                                    >
                  <mat-autocomplete (optionSelected)="selectSite()" #autoSite="matAutocomplete" [displayWith]="displayFnSite">
                    <mat-option *ngFor="let site of filteredSites | async" [value]="site">
                       <span>{{ site.libelle}}</span>
                    </mat-option>
                  </mat-autocomplete>
              </mat-form-field>
              <mat-progress-bar *ngIf="loadingsite" mode="indeterminate"></mat-progress-bar>
           </div>
       </div>
   </form>

键盘输入几个输入字段

0 个答案: