将值附加到 TypeScript 中的字符串变量答案

【问题标题】：Appending a value to a string variable in TypeScript将值附加到 TypeScript 中的字符串变量
【发布时间】：2020-07-18 12:01:11
【问题描述】：

我是 Angular 的新手。我正在尝试在每次击键时获取用户输入的文本框，并将其附加到类似 java 上的字符串变量中。

在文本框中我使用 (keyup)="onKey($event)" 如下，

<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Departure Airport"  id="departure" name="departure" (keyup)="onKey($event)" [(ngModel)]="booking.departure" >

然后我使用它并尝试将输入的每个字母附加到变量中，如下所示

export class BookingComponent implements OnInit {
  

  public  userInPut="";

  constructor(private flightService:FlightService, private router: Router) { }

  ngOnInit(): void {

  }

  onKey(event: any){
    this.userInPut=this.userInPut+event;
   console.log(this.userInPut);
  }


}

我预计输出会是这样的 a,ab,abc,abcd 但输出是一组对象，如下图所示

我想要做的是在文本框下显示 userInPut 变量值。在 typescript 中创建的所有变量都是对象形式吗？请给我一个说明并获得预期的输出。

【问题讨论】：

事件处理程序的第一个参数将始终（除非您明确更改行为）是事件对象，因此 [object KeyboardEvent]。查看文档KeyboardEvent 具有哪些属性以及什么可以解决您的问题。
有什么理由不使用[(ngModel)]？你真的需要听每一次击键吗？
@Clashsoft 我正在尝试开发一个自动完成文本框

标签： angular typescript

【解决方案1】：

如果你需要像 (a,ab,abc,abcd) 这样的输出，那么试试这个：

在 HTML 文件中：

     <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Departure Airport"  id="departure" name="departure" (keyup)="onkeyUp($event.target.value)">

在 TS 文件中：

userInPut: any = '';

  onkeyUp(value) {
    this.userInPut = value;
    console.log(this.userInPut);
  }

【讨论】：