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"; 
    } 
} 

---

다음과 같이 입력 요소를 않는 액세스 할 수 있습니다 이 같은

setField(chipSelected: Filter) { 
///your code 
this.searchFor='somevalue'; 
} 

나는 angularjs2와 typescript를 사용하고 있는데, document.getElementById에 의해 요소 값을 얻으려고하고 있는데, 뭔가 잘못 됐습니까?

구성 요소에는 템플릿과 .ts 템플릿 코드 파일이 함께 제공되므로이 기능을 쉽게 구현할 수 있습니다.

Answer 2

오, 당신은 앵귤러 세계에서 새로운 사람이라고 생각합니다. ngModel에 대한 내용과 데이터 바인딩에 대해 (here a link) 읽으시기 바랍니다. .getElementId()과 같은 네이티브 JS 메서드를 사용하는 것은 끔찍한 생각입니다. F.e. 구성 요소에서

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

선언 cariable :

someValue: string; 

및 방법의 사용 :

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