Question

我来自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)">

这将在AngularJs中起作用。

但是，我想在Angular中做同样的事情。可能吗？。我已经按如下方式编写了Angular代码：

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

但是，它不起作用。

错误：无法读取未定义的属性“用户名”。

Answer 1

像这样在component.ts中创建一个属性/变量

public user : any = {};

编辑：这是您的组件外观

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

      constructor() {

      }
      ngOnInit(): void {

      }
    }

Answer 2

在组件内部声明此变量

 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()">

无需更改函数内部的“用户”，因为当模板更改时，双向角度数据绑定会更新组件内部的“用户”

您可以在函数中直接访问

funlogin() {

  // this.user

}

Answer 3

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

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

disp('\'' \"')
disp("\' \""")

Answer 4

它是这样固定的：

class cls1{

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

感谢@Ali Shahbaz

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

4 个答案: