我用ngFor创建了三个按钮,每个按钮都有自己的名字,存放在数组中:buttonData []。 buttonData还包含文本和图像。 我在这里想要实现的是当我点击我的一个按钮时出现文本和图像,当然每个按钮都有自己的文本和图像。 我无法理解为什么我的功能不起作用,因为我没有错误。 这是我的代码:
component.ts
import { Component, OnInit } from '@angular/core';
import { FeaturesService} from '../features.service';
@Component({
selector: 'app-features',
templateUrl: './features.component.html',
styleUrls: ['./features.component.css']
})
export class FeaturesComponent implements OnInit {
constructor(private featuresService: FeaturesService ) { }
title = 'Features';
textprediction: String;
textrebalancing: String;
textvisualization: String;
text = '';
img = '';
buttonData = [
{
title: 'Prediction',
description: this.textprediction,
img: '../../assets/prediction.png'
},
{
title: 'Rebalancing',
description: this.textrebalancing,
img: '../../assets/rebalancing.png'
},
{
title: 'Visualization',
description: this.textvisualization,
img: '../../assets/visualization.png'
}
];
ngOnInit() {
this.featuresService.getFeatures().subscribe(value => {
console.log(value);
this.textprediction = value[1].textprediction;
});
this.featuresService.getFeatures().subscribe(value => {
console.log(value);
this.textrebalancing = value[2].textrebalancing;
});
this.featuresService.getFeatures().subscribe(value => {
console.log(value);
this.textvisualization = value[3].textvisualization;
});
}
onTitleClick(i: number) {
this.text = this.buttonData[i].description;
this.img = this.buttonData[i].img;
}
}
component.html
<h1>{{title}}</h1>
<tr class="btn-group" *ngFor="let button of buttonData; let i = index">
<td>
<button (click)="onTitleClick(i)">
{{button.title}}
</button>
</td>
</tr>
三个变量textprediction,textrebalancing和textvisualization是我从json文件中获得的一些文本。 当我以这种方式声明我的函数时,我无法理解为什么它会起作用:
onTitleClick() {
this.text = this.textprediction;
}
但是当我要求我的函数去我的数组中时,它不起作用。
答案 0 :(得分:1)
您应该将按钮传递给功能
<button (click)="onTitleClick(button)">
并将其设为
onTitleClick(btnVal:any) {
this.text = btnVal.description;
}