IDで値の要素を取得する方法 - 角4

Question

私はREST APIに取り組んでいます.Java 1.6では1つのアプリケーションしかなく、別のフロントエンドでは4つのアプリケーションがあります.HTMLのIDで値を取得したいタグ 私はこのようなDOMを試してみました：<HTMLInputElement>document.getElementById(this.keyList[i].keyId)).value;しかし、問題は私はJSONの属性をフェッチするので、クラスキーでは、このsintax "this.keyList [i] .keyId"を使用できません、私はkey.keyIdを行って、それが存在しないと言った。この問題を解決するには別の場所に存在するのでしょうか？ありがとう。

HTMLコード：

<!-- Breadcrumbs --> 
<div class="row"> 
<div class="col-md-12"> 
    <ol class="breadcrumb"> 
     <li routerLinkActive="active"><a routerLink="/">Início</a></li> 
     <li>Consulta</li> 
    </ol> 
</div> 
</div> 
<div class="row"> 
<div class="col-md-12"> 
    <fieldset> 
     <legend>Consultar Dados Telemáticos</legend> 
     <form> 
      <!-- PROVIDERS --> 
      <div class="row"> 
       <div class="col-md-4"> 
        <label>Provedor</label> <span class="required">*</span> 
<br> 
        <select class="form-control 
(ngModel)]="selectedProvider" 
         (change)="getKey(selectedProvider)" name="provider"> 
         <option *ngFor="let providers of providerHeaderList" 
          [ngValue]="providers">{{providers.description}} 
</option> 
        </select> 
       </div> 
      </div> 
      <!-- KEYS DYNAMIC --> 
      <br /> 
      <div class="row"> 
       <div class="col-md-4" *ngFor="let keys of keyList"> 
        <label>{{keys.description}}</label> 
        <span class="required">*</span> 
        <input [id]="keys.keyId" class="form-control" 
type="text" /> 
       </div> 
      </div> 
      <!-- DATE PICK --> 
      <br /> 
      <div class="row" *ngIf="!keyList?.length==0"> 
       <div class="col-md-4"> 
        <label>Data de Início da Pesquisa</label> 
        <input class="form-control" type="date" 
placeholder="dd/mm/aaaa" data-original-title title /> 
       </div> 
      </div> 
      <!-- BUTTON SEARCH --> 
      <br /> 
      <br /> 
      <div class="row" *ngIf="!keyList?.length==0"> 
       <div class="col-md-4"> 
        <button class="btn btn-primary btn-sm ng-binding" 
(click)="btnSearchClick()">Pesquisar</button> 
       </div> 
       <div class="col-md-12"> 
        <span><small>* Campos de preenchimento obrigatório. 
</small></span> 
       </div> 
      </div> 
     </form> 
    </fieldset> 
</div> 
</div> 
<!-- RESULTS TABLE -->  
<app-provider-result></app-provider-result> 

活字体コード：

// Angular 
import { Component, OnInit, ElementRef } from '@angular/core'; 
// Serviços 
import { ProviderService } from '../../services/provider.service'; 
import { KeyService } from '../../services/key.service'; 

import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
// Observable class extensions 
import 'rxjs/add/observable/of'; 
// Observable operators 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/operator/switchMap'; 
// Modelos 
import { Provider } from '../provider'; 
import { Key } from '../../key/key'; 

@Component({ 
selector: 'app-provider-search', 
templateUrl: './provider-search.component.html', 
styleUrls: ['./provider-search.component.css'] 
}) 
export class ProviderSearchComponent implements OnInit { 

providerHeaderList: Provider[] = []; 
keyList: Key[] = []; 
selectedProvider = null; 
keyValues: string[] = []; 

constructor(private providerService: ProviderService, private keyService: KeyService, private myElement: ElementRef) { } 

ngOnInit() { 
    this.getProviders(); 
} 

getProviders() { 
    this.providerService.getAllHeaders().subscribe(p => { 
     this.providerHeaderList = p; 
    }) 
} 

getKey(selectedProvider){ 
    this.keyService.getAllKeyByProviderId(selectedProvider.id, selectedProvider.description).subscribe(k => { 
     this.keyList = k; 
    }); 
} 

btnSearchClick(){ 
} 

} 

Answer 1

あなたが好きに使用できるTSに今

<input type = "text" value = "demo" #ref> 
<button (click) = "submit(ref.value)">submit</button> 

のようにテンプレートrefernce

を利用することができます

ref.value // template val 
submit(value){ console.log("Reference value" + value) }