通过单击按钮在控制台中打印文本框输入值

Question

这是我的app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public title:string = 'angularapp';

  public name:string = 'class-binding';
  

  sucessClass='green';
 f1(username){
   console.log('welcome:$(username.value)')
 }

}

这是我的app.component.html

<div>

  <h3>Username:<input #username/></h3>

  <button (click)="f1(username)">click</button>
</div>

我想在我的控制台中打印文本框输入值。在这里，我像这样打印我的控制台。 welcome:$(username.value)

Answer 1

应该是`welcome:${username.value}`

Answer 2

你的Template Literal写错了。你有两个错误：

您使用的是引号而不是反引号。
您使用的是圆括号而不是大括号。

要使您的日志正常工作，请将两者替换为如下所示：

 f1(username){
   console.log(`welcome:${username.value}`)
 }

这是一个working example

Answer 3

您要使用的是使用 ``（反引号）的模板文字

模板文字是允许您使用嵌入式表达式的字符串文字。

$ 符号后跟大括号可让您在表达式中放置占位符。

例如：

var obj = {value: 5};
f1(obj);

function f1(username){
   console.log(`welcome:${username.value}`);
 }

通过单击按钮在控制台中打印文本框输入值

print textbox input value in console by clicking button

javascript

event-handling