“AppComponent”类型不存在属性 function

Question

我们正在尝试将数组元素推入数据（数组）。 我是 angular 和 typescript 的初学者，从事公式计算器项目。 我试图将 javascript 转换为 typescript，但出现了这些错误。 我不知道是否需要为我的 function 做一些导入或导出工作，或者我在代码中遗漏了一些东西。 首先，我创建了公式计算器代码在 javascript 中运行良好，但是当我将 javascript 转换为 angular 项目的 typescript 时，问题就开始了。我正在使用 Angular12。

- - - 错误 - - - -

    Error: src/app/app.component.html:27:56 - error TS2339: Property 'add_element' does not exist on type 'AppComponent'.  27 <input type=button id="element" value='ADDDD' (click)='add_element()'  src/app/app.component.ts:6:16  



----App.Comonent.html-----

    <input type=text  id='result'>
    <input type=button id="element" value='ADDDD' (click)='add_element()'>
    <div id=disp></div>

------App.component.ts------

declare var require:any
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  //  data:any = new Array(); // creating array
  //  data1 = new Array();

  addElement = function add_element():any{
   var  data:any = new Array(); // creating array
  data.push((document.getElementById('result') as HTMLInputElement).value); // adding element to array
  ((document.getElementById('result') as HTMLInputElement).value)=''; // Making the text box blank
  let element:any = function disp() // displaying the array elements
 {
   let element1:any = function disp(row1:number,col1:number):any{
  var str='';
  str = 'total number of elements in data array : ' + data.length + '<br>';
  let n = row1 * col1; 
  if(data.length<= n ){

  for (var i=0;i<data.length;i++)
  {

  str += i + ':'+data[i] + "<br >";  // adding each element with key number to variabl
  }

  (document.getElementById('disp')as HTMLInputElement).innerHTML=str; // Display the elements of the array


  }
}
}
  }


 add_element() {
  throw new Error('Function not implemented.');
}
}

Answer 1

您需要使用与模板中方法相同的名称和class。例如：

<input type=button id="element" value='ADDDD' (click)='addElement()'>

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

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }

  addElement(): void {
    // your code here
  }
}