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

Question

我正在研究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的特性？谢谢大家.

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>

TypeScript代码:

// 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

您可以使用模板参考

喜欢

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