用于将 2 个对象绑定到 1 个事件的 Angular 2 语法答案

【问题标题】：Angular 2 syntax for binding 2 objects to 1 event用于将 2 个对象绑定到 1 个事件的 Angular 2 语法
【发布时间】：2019-03-27 23:20:47
【问题描述】：

我想将 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>

【问题讨论】：

不清楚你要做什么，你能添加任何例子，看起来你想要{{date.value + text.value}}
是的。这就是我想要的。当前日期和时间由Date(); 和来自component.ts 的date 和text 输入，无论输入的值是什么。单击按钮后，两者都应显示在
{{values}}
中。

标签： angular angular-template

【解决方案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 = "";
}

【讨论】：