Angular 将 2 个对象绑定到 1 个事件的 2 种语法

Question

我想将 2 个简单的输入字段绑定到 Angular 中的 1 个点击事件。一个框应是用于键入文本的普通输入框，另一个框将提供 Date(); 的时间戳。如何通过按钮上的点击事件显示这两个值？

// input #date offers the timestamp timestamp

<input #date type="text" placeholder="now">
<input #text type="text">
<p><b>{{now}}</b> {{values}}</p>
<button class="btn btn-primary" (click)="values=box.value | text.value">Log Data</button>

Answer 1

我不得不猜测你的意图，但如果你试图捕获两个输入，为什么不使用直接模型绑定（需要导入 FormsModule）？

HTML:

<input #date type="text" placeholder="mm/dd/yyyy" [(ngModel)]="dateToLog">
<input #text [(ngModel)]="textToLog" type="text">
<div *ngIf="logValues">
<p *ngFor="let val of logValues"><b>{{val | json}}</b></p>
</div>
<button class="btn btn-primary" (click)="logValue()">Log Data</button>

打字稿：

logValues: any = [];
dateToLog: string = "";
textToLog: string = "";

logValue(): void {
   let d = new Date(Date.parse(this.dateToLog));

   let len = this.logValues.length;

   let name1 = ("date_" + len);
   let name2 = ("text_" + len);

   let x = { };
   x[name1] = d;
   x[name2] = this.textToLog;
   this.logValues.push(x);
   this.dateToLog = "";
   this.textToLog = "";
}

Angular 将 2 个对象绑定到 1 个事件的 2 种语法

Angular 2 syntax for binding 2 objects to 1 event

angular-template

angular