未能加载一个简单的onclick事件来以角度显示文本框值

Question

我有一个简单的html视图，其中输入了订单号，但我无法获得onClick事件中文本框的值

HTML

<div class="row">
<div class="col-lg-12">
<nb-card>
<nb-card-header>Place Order</nb-card-header>
<nb-card-body>
<input type="text" id="txtOrderNumber" nbInput fullWidth placeholder="Order Number">
<div class="full-name-inputs">
<input nbInput fullWidth  placeholder="Date Placed" [nbDatepicker]="datePlaced">
<nb-datepicker #datePlaced></nb-datepicker>
<input nbInput fullWidth placeholder="Date Expected" [nbDatepicker]="dateExpected">
<nb-datepicker #dateExpected></nb-datepicker>
</div>
<input type="text" nbInput fullWidth shape="rectangle" placeholder="Supplier">
<input type="text" nbInput fullWidth shape="semi-round" placeholder="Unit">
<input type="text" nbInput fullWidth shape="round" placeholder="Quantity">
<input type="text" nbInput fullWidth placeholder="Total Amount" disabled/>
<textarea rows="5" nbInput fullWidth shape="round"  placeholder="Order Description"></textarea>
<button  (click)="ShowRawMaterials()" nbButton>Click Me</button>

</nb-card-body>
</nb-card>
</div>
</div>

打字

import { Component } from '@angular/core';
import { NbDateService } from '@nebular/theme';
/*import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';*/
@Component({
selector: 'ngx-form-inputs',
styleUrls: ['./place-order.component.scss'],
templateUrl: './place-order.component.html',
})
/*export class PlaceOrderComponent implements AfterViewInit {
@ViewChild('txtOrderNumber') txtOrderNo: ElementRef;*/
export class PlaceOrderComponent {
starRate = 2;
heartRate = 4;
radioGroupValue = 'This is value 2';
min: Date;
max: Date;
constructor(protected dateService: NbDateService<Date>) {
this.min = this.dateService.addDay(this.dateService.today(), -5);
this.max = this.dateService.addDay(this.dateService.today(), 5);
}
ShowRawMaterials()  {

var inputValue = (<HTMLInputElement>document.getElementById(txtOrderNo)).value;
alert(inputValue);
}
}

Answer 1

您可以在StackBlitz Link 中找到演示

您可以在input orderNo内的html中使用这样的模板引用变量。。

<input
#orderNo
type="text"
id="txtOrderNumber"
nbInput
fullWidth
placeholder="Order Number"
/>
<button (click)="ShowRawMaterials(orderNo)" nbButton>Click Me</button>

然后您可以在component.ts文件中使用它，如下所示。。。

ShowRawMaterials(orderNo) {
console.log(orderNo?.value);
}