为什么 ng-click 没有触发参数？ [关闭]答案

【问题标题】：Why ng-click with arguments not firing? [closed]为什么 ng-click 没有触发参数？ [关闭]
【发布时间】：2019-12-25 08:47:02
【问题描述】：

我尝试在按钮 ng-click 上设置参数并在 component.ts 方法上捕获它。但它不起作用。

log-view.component.html:

<div class="row">
<div class="col-md">
    <ng-container>
    <mat-sidenav-container class="sidebar-container">
        <mat-sidenav>Sidenav content</mat-sidenav>
        <mat-sidenav-content class=".radius">Applications
                  <cdk-virtual-scroll-viewport itemSize="50" style="height: 500px; width: 200px;">
                  <ng-container *cdkVirtualFor="let item of appItems">
                    <button mat-raised-button color="accent" class=".radius" ng-click="onClick({{item}})">
                      {{item}}</button>
                  </ng-container>

              </cdk-virtual-scroll-viewport>
        </mat-sidenav-content>
    </mat-sidenav-container>
  </ng-container>
</div>

还有log-view.component.ts：

import { Component, ChangeDetectorRef } from '@angular/core';
import {ChangeDetectionStrategy, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-log-view',
  templateUrl: './log-view.component.html',
  styleUrls: ['./log-view.component.sass'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LogViewComponent implements OnInit {
  items = Array.from({
    length: 100000
  }).map((_, i) => `Item #${i}`);
  appItems: string[]; //Array.from({length: 10}).map((_, i) => `App #${i}`);

  constructor(private http: HttpClient, private cdRef: ChangeDetectorRef) {}

  ngOnInit() {
    let data = this.http.get('server/app');
    let allApps: AllApp;
    data.subscribe((l: AllApp) => {
      console.log('apps:' + l.count);
      console.log('values:' + l.value);
      allApps = l;
      this.appItems = allApps.value;
      this.cdRef.detectChanges();
    });
  }

  showLastLog(item: string) {
    console.log(item);
  }

  public onClick(item: string) //not firing!
  {
    console.log('alert!' + item);
  }
}

class AllApp {
  count: number;
  value: string[];
}

如何使按钮单击并为方法设置参数？谢谢！

【问题讨论】：

将 ng-click 替换为 (click)。喜欢 (click)="onClick(item)"

标签： html angular typescript button

【解决方案1】：

您在 Angular 中使用 AngularJS 语法。

ng-click 被替换为(click)。

您也不需要像在使用参数调用 onClick 方法时那样插入 item。

试试这个：

<div class="row">
  <div class="col-md">
    <ng-container>
      <mat-sidenav-container class="sidebar-container">
        <mat-sidenav>Sidenav content</mat-sidenav>
        <mat-sidenav-content class="radius">
          Applications
          <cdk-virtual-scroll-viewport 
            itemSize="50" 
            style="height: 500px; width: 200px;">
            <ng-container 
              *cdkVirtualFor="let item of appItems">
              <button 
                mat-raised-button 
                color="accent" 
                class="radius" 
                (click)="onClick(item)">
                {{item}}
              </button>
            </ng-container>
          </cdk-virtual-scroll-viewport>
        </mat-sidenav-content>
      </mat-sidenav-container>
    </ng-container>
  </div>
</div>

【讨论】：