“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
  }
}