在Angular 2中,你可以使用模板引用变量和事件绑定来从循环外的按钮访问选择的值。下面是一个示例代码:
HTML模板:
{{ item.name }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
items = [
{ name: 'Item 1', selected: false },
{ name: 'Item 2', selected: false },
{ name: 'Item 3', selected: false }
];
getSelectedValues() {
const selectedItems = this.items.filter(item => item.selected);
console.log(selectedItems);
}
}
在这个例子中,我们使用*ngFor
指令循环渲染一个包含复选框的项目列表。每个项目对象都有一个selected
属性,用来表示是否选中。
按钮上的(click)
事件绑定了getSelectedValues()
方法,当按钮被点击时,该方法会获取所有选中的项目。我们使用Array.filter()
方法来筛选出selected
属性为true
的项目,并将结果打印到控制台。
这样,当点击按钮时,你就可以从循环外访问选择的值了。