Angular 将输入文本区域的更改传递给角度组件时发生未捕获的引用错误

我试图通过在component.ts文件中定义一个函数来控制事件更改中的一个文本区域内容，我正在传递onchange事件。但我得到了类似于

uncaughtreferenceerror:setUserName未定义的错误

我的html页面包含以下行：

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center">
     <div> 
                <mat-form-field >     
                <textarea matInput placeholder="User Name" matTextareaAutosize 
                    name="username" matAutosizeMinRows="2" matAutosizeMaxRows="5" onchange="setUserName(this.username.username);">
                </textarea>
            </mat-form-field>
    </div>      
    <div>   
        <mat-form-field >     
                <textarea matInput placeholder="First Name" matTextareaAutosize 
                    name="firstname" matAutosizeMinRows="2" matAutosizeMaxRows="5" onchange="setFirstName(this.firstname.firstname);">
                    
                    </textarea>
            </mat-form-field>
    </div>
    <div> 
    <mat-form-field >     
                <textarea matInput placeholder="Last Name" matTextareaAutosize 
                    name="lastname" matAutosizeMinRows="2" matAutosizeMaxRows="5" onchange="setLastName(this.lastname.lastname);">
                
                </textarea>
            </mat-form-field>
    </div>
</div> 

我的.ts文件如下所示：

export class ViewedituserinformationComponent implements OnInit 
{
 selectedinstitution: string;
 selecteddept: string;
 filtertext:string;
 public status:boolean=false;
 public data= new Array();
 institutionalUsers: any;

 displayedColumns = [ 'select','username', 'firstname','lastname'];
 dataSource = new MatTableDataSource<Element>();
 selection = new SelectionModel<Element>(true, []);
 filterObj: any;

 @ViewChild(MatPaginator) paginator: MatPaginator;

 ngAfterViewInit() 
  {
   this.dataSource.paginator = this.paginator;
 }


 constructor(public dialog: MatDialog , public 
manageuserService:ManageuserService) { }

 ngOnInit() { 


 this.manageuserService.loadUserListApiMethod()
  .subscribe((data:any)=> {
    this.dataSource.data=data;
     console.log(data);
     
  });
 }
setUserName(userName: any){
  console.log(userName  );
}
setFirstName(firstName: any){
 console.log(firstName  );
}
setLastName(lastName: any){
 console.log(lastName  );
}

导出类ViewedituserinformationComponent实现OnInit
{
所选机构：字符串；
selecteddept：字符串；
filtertext:字符串；
公共状态：boolean=false；
公共数据=新数组（）；
机构用户：任何；
displayedColumns=['select'、'username'、'firstname'、'lastname']；
dataSource=新MatTableDataSource（）；
selection=新SelectionModel（true，[]）；
过滤器BJ：任何；
@ViewChild（MatPaginator）分页器：MatPaginator；
ngAfterViewInit（）
{
this.dataSource.paginator=this.paginator；
}
构造函数（公共对话框：MatDialog，公共
manageuserService:manageuserService）{}
ngOnInit（）{
this.manageuserService.loadUserListApiMethod（）
.订阅（（数据：任意）=>{
this.dataSource.data=data；
控制台日志（数据）；
});
}
setUserName（用户名：任意）{
console.log（用户名）；
}
setFirstName（名字：任意）{
console.log（名字）；
}
setLastName（姓氏：任意）{
console.log（lastName）；
}

我现在正处于探索阶段，我哪里做错了