如何在单击按钮时将绑定变量的值传递给模板中的方法

<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>

currentItem has value equal to "TV". and i pass this value to the binding variable item.

我在ngOnInit中添加了console.log,它打印item的值,以确保从父项到子项的绑定按照假定的方式工作。

在里面

<button (click) = addNewItem(item.value)></button>

当我编译应用程序时,我发现下面发布的错误。 请告诉我如何在单击按钮时将绑定变量的值传递给方法

错误

TS2339: Property 'item' does not exist on type 'AppComponent'.

2 <button (click) = addNewItem(item.value)></button>
                               ~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

:

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'InputOutputBindings';
  currentItem = 'TV';

  @Output() newItemValue = new EventEmitter<string>();

  addNewItem(val : string) {
    this.newItemValue.emit(val);
    console.log("add new item");
  }
}

item-details.directive.ts :

import { Directive, Input, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appItemDetails]'
})
export class ItemDetailsDirective {

  @Input() item : string = "";

  constructor() { }
  ngOnInit() {
    console.log("ngOnInit->:" + this.item)
  }

}

:

<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>
<button (click) = addNewItem(item.value)></button>