如何将两个文本框值传递给Angular6中的函数？

我来自AngularJs背景。 我有如下代码：

Username:<input type="text" ng-model="user.username">
 <br>
Password:<input type="text" ng-model="user.password">
 <br>
<input type="button" value="Login" ng-click="funlogin(user)">

Username:<input type="text" [(ngModel)]="user.username">
 <br>
Password:<input type="text" [(ngModel)]="user.password">
 <br>
<input type="button" value="Login" (click)="funlogin(user)">

用户名：


密码：

这将在AngularJs中起作用

但是，我想在角度上做同样的事情。可能吗？。我编写了如下代码：

Username:<input type="text" ng-model="user.username">
 <br>
Password:<input type="text" ng-model="user.password">
 <br>
<input type="button" value="Login" ng-click="funlogin(user)">

Username:<input type="text" [(ngModel)]="user.username">
 <br>
Password:<input type="text" [(ngModel)]="user.password">
 <br>
<input type="button" value="Login" (click)="funlogin(user)">

用户名：


密码：

但是，它不起作用

错误：无法读取未定义的属性“username”

---

在component.ts中创建一个属性/变量，如下所示

public user : any = {};

编辑：这是您的组件的外观

export class AppComponent implements OnInit {
      public user: any = {};

      constructor() {

      }
      ngOnInit(): void {

      }
    }

---

在component.ts中创建一个属性/变量，如下所示

public user : any = {};

编辑：这是您的组件的外观

export class AppComponent implements OnInit {
      public user: any = {};

      constructor() {

      }
      ngOnInit(): void {

      }
    }

---

它在Angular2+中的工作方式是。。模板中用于绑定目的的任何属性。。应该是组件中的公共属性。由于您在模板中使用的是用户对象（'user.username'），因此您需要在组件中包含用户对象：

在组件中定义公共属性，如下所示：

public user = { username: '', password: '' };

class cls1{

public user:any={}
t1;t2:string;
funlogin(user){
    if(user.username=="scott" && user.password =="scott123")
    {
      alert("Valid")
    }
    else
    {
      alert("Invalid")
    }
   }
 }

---

它在Angular2+中的工作方式是。。模板中用于绑定目的的任何属性。。应该是组件中的公共属性。由于您在模板中使用的是用户对象（'user.username'），因此您需要在组件中包含用户对象：

在组件中定义公共属性，如下所示：

public user = { username: '', password: '' };

class cls1{

public user:any={}
t1;t2:string;
funlogin(user){
    if(user.username=="scott" && user.password =="scott123")
    {
      alert("Valid")
    }
    else
    {
      alert("Invalid")
    }
   }
 }

---

在组件内部声明此变量

 public user: any = {};

并更改模板，如下所示

Username:<input type="text" [(ngModel)]="user.username">
 <br>
Password:<input type="text" [(ngModel)]="user.password">
 <br>
<input type="button" value="Login" (click)="funlogin()">

---

在组件内部声明此变量

 public user: any = {};

并更改模板，如下所示

Username:<input type="text" [(ngModel)]="user.username">
 <br>
Password:<input type="text" [(ngModel)]="user.password">
 <br>
<input type="button" value="Login" (click)="funlogin()">

---

它是这样固定的：

public user = { username: '', password: '' };

class cls1{

public user:any={}
t1;t2:string;
funlogin(user){
    if(user.username=="scott" && user.password =="scott123")
    {
      alert("Valid")
    }
    else
    {
      alert("Invalid")
    }
   }
 }

---

多亏了

它是这样固定的：

public user = { username: '', password: '' };

class cls1{

public user:any={}
t1;t2:string;
funlogin(user){
    if(user.username=="scott" && user.password =="scott123")
    {
      alert("Valid")
    }
    else
    {
      alert("Invalid")
    }
   }
 }

---

多亏了

我不明白问题是模型中的值没有更新吗？你得到了什么错误？你可以显示，如何以及在哪里定义你的对象吗？我不明白问题是模型中的值没有更新吗？你得到了什么错误？你可以显示，如何以及在哪里定义你的对象吗，错误出现在HTML中，甚至没有出现在TS中。但是您必须将这一行添加到component.tsCan您可以像您所说的那样发布示例component.TS文件。因为我甚至不知道如何创建它？但是，错误出现在HTML上，甚至没有出现在TS上。但是您必须将这一行添加到component.tsCan您可以像您所说的那样发布示例component.TS文件。因为我甚至不知道如何创造它？