如何通过id获取value元素 - Angular 4

我正在使用REST API，我在Java 1.6中有一个应用程序beck-end，而在Angular 4中有另一个应用程序前端。我想通过HTML的id获取值标签，我尝试使用这样的DOM：<HTMLInputElement>document.getElementById(this.keyList[i].keyId)).value;但问题是我不能使用这个sintax“this.keyList [i] .keyId”，因为在类Key中我只有一个构造函数，在JSON中获取属性，所以，当我去做key.keyId时，表示它不存在。是否存在另一个解决这个问题，ng的性质？感谢人们。如何通过id获取value元素 - Angular 4

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(){ 
} 

}

来源

2017-06-19 Lau13

是否需要使用Id？或者你可以像这样使用模板引用变量：''你可以在这里看到一个例子：https://stackoverflow.com/questions/40819739/angular-2-template-reference-variable-with-ngfor – DeborahK

@DeborahK已经尝试过，但问题出在HTML这个div是动态的，因此，如果我把#val它返回第一个输入的值; – Lau13

你可以利用模板refernce的

像

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

现在你可以像使用TS

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

来源

2017-06-19 19:03:07

如何通过id获取value元素 - Angular 4

回答

相关问题