Angular 7 - 使用ngFor属性设置变量点击事件_编程开发

Angular 7 - 使用*ngFor属性设置变量点击事件

创始人

2024-10-16 15:32:45

0次

在Angular 7中，可以使用*ngFor指令来循环渲染一个数组，并且可以在循环中使用属性来设置变量和点击事件。下面是一个示例：

HTML模板文件：


  
    {{ item }}

组件文件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = ['item1', 'item2', 'item3'];

  handleClick(item) {
    console.log('Clicked item:', item);
  }
}

在上面的示例中，我们使用*ngFor指令循环渲染一个数组中的每个项目，并使用let关键字将当前项目赋值给item变量。我们还使用let i = index来获取当前项目的索引。

在每个生成的li元素上，我们使用(click)事件绑定语法来绑定handleClick方法，该方法会在用户点击元素时被调用，并将当前项目作为参数传递给它。

当用户点击列表中的任何项时，handleClick方法将被调用，并打印出被点击的项目。

请注意，上述代码示例假设你已经创建了一个Angular 7项目，并且在组件模板中使用了上述HTML代码。

上一篇：Angular 7 - 使用 *ngFor 显示数据问题（数据未显示）

下一篇：Angular 7 - 使用单选按钮按ID保存注册

Angular 7 - 使用*ngFor属性设置变量点击事件

相关内容

热门资讯