：ボタンは、私のクラスでは

Question

をクリックされたときに、クラスのプロパティを更新することはできません私は、デフォルトではnullに設定されている「curSelectedSite」というプロパティを持っている：私のマークアップで

export class MyComponent implements OnInit { 
    curSelectedSite = null; 

    displayFn(site): string { 
    this.curSelectedSite = site; 
    return site ? site.name : site; 
    } 

    addSite(): void { 
     console.warn(this.curSelectedSite) // outputs "null" and not the chosen autocomplete value as it should 
    } 
} 

私はオートコンプリートフィールドを持っていますこれは、ユーザーがサイトのリストからサイトを選択することができます：ユーザーがドロップダウンからオプションを選択したときに

<mat-form-field class="field"> 
    <md-input-container> 
     <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" placeholder="Choose Site" id="choose-site"> 
    </md-input-container> 
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> 
     <mat-option *ngFor="let site of sites" [value]="site"> 
      {{site.name}} 
     </mat-option> 
    </mat-autocomplete> 
</mat-form-field> 

<button mat-raised-button (click)="addSite()">Add Site</button> 

displayFn方法火災を。ご覧のとおり、ユーザが選択したものが発生したときに、curSelectedSiteのプロパティを更新しています。しかし、「Add Site」ボタンをクリックしたときの後にユーザが何かを選択すると、nullが出力され、更新されたものではありません。どうして？

Answer 1

少なくとも、オートコンプリート<input>の値をクラスプロパティcurSelectedSiteにバインドする必要があります。このバインディングがないと、ユーザがオートコンプリートドロップダウン/メニューからオプションを選択したときに、AngularはcurSelectedSiteの値を更新する方法を知りません。

NgModelまたはTemplate Drive FormsまたはReactive Formsなどのフォーム構造を使用できます。

<mat-form-field class="field"> 
    <md-input-container> 
     <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" placeholder="Choose Site" id="choose-site" [(ngModel)]="curSelectedSite"> 
    </md-input-container> 
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn"> 
     <mat-option *ngFor="let site of sites" [value]="site"> 
      {{site.name}} 
     </mat-option> 
    </mat-autocomplete> 
</mat-form-field> 

<button mat-raised-button (click)="addSite()">Add Site</button> 

{{curSelectedSite}} 

実際にはexampleです。

うまくいけば助けてください！