htmlフィールドの値を角度4で設定する

Question

私の4角型プロジェクトでは、入力フィールドとMatSelectに値を何も設定せずに値を設定する必要があります。

私はマット・オプションおよび入力フィールドの値を設定する必要があり、ボタンをクリックするとこれはHTML

<div class="row search-component"> 
    <div class="col-md-5 no-padding-right"> 
     <mat-form-field> 
      <mat-select placeholder="searchfor" id="selectedFilter" name="propertyList" #selectedFilter> 
       <mat-option *ngFor="let property of propertyList" [value]="property"> 
        {{property.label}} </mat-option> 
      </mat-select> 
     </mat-form-field> 
    </div> 

    <div class="col-md-7 no-padding-left"> 
     <mat-form-field> 
      <input matInput placeholder="search" id="searchfield" name="searchfield" #selectedValue> 
      <mat-icon class="pointer" matSuffix>search</mat-icon> 
     </mat-form-field> 
    </div> 
</div> 

です。

setField(chipSelected: Filter) { 
    this.filter = chipSelected; 
    document.getElementById('searchfield').focus(); 
    document.getElementById('searchfield').value = 'somevalue'; <-- I can't use this instruction 
    } 

私はなぜ、値にアクセスすることはできません。

これは、値を設定する必要がある方法？ どうすればアクセスできますか？

Answer 1

あなたは、TSファイルジュースに

<input matInput [(ngModel)] = "searchFor" placeholder="search" 
     id="searchfield" name="searchfield" #selectedValue> 

その後、あなただけの値テンプレートプロパティで、あなたの入力をバインドし、割り当て、その後、その角度

<input #someInput placeholder="test input"> 

import { AfterViewInit,ElementRef } from '@angular/core'; 

export class AppComponent implements AfterViewInit { 
    @ViewChild('someInput') someInput: ElementRef; 

    ngAfterViewInit() { 
    this.someInput.nativeElement.value = "update input value"; 
    } 
} 

---

以下のように入力要素にないアクセスすることができますこのように

私はanglejs2とtypescriptを利用しているのですが、document.getElementByIdで要素値を取得しようとしていますが、何か間違っていますか？

コンポーネントにはテンプレートと.tsテンプレートコードファイルが付属しているため、この機能を簡単に実現できます。

Answer 2

ああ、私はあなたが角度の世界では新しいと思います。私はngModelとデータバインディングについて角度（here a link）を読んでみることをお勧めします。 .getElementId()のようなネイティブJSメソッドを使用することは恐ろしい考えです。 F.e.よりよい解決策は方法であなたの入力のためのngModelを使用している：あなたのコンポーネントで

<input matInput placeholder="search" [(ngModel)]="someValue" id="searchfield" name="searchfield"> 

宣言cariable：

someValue: string; 

し、あなたの方法を使用している：

setField(chipSelected: Filter) { 
    this.someValue = 'somevalue'; 
} 

あなたは、このメソッドを書いている