Question

我用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;
  }

但是当我要求我的函数去我的数组中时，它不起作用。

Answer 1

您应该将按钮传递给功能

  <button (click)="onTitleClick(button)">

并将其设为

 onTitleClick(btnVal:any) {
    this.text = btnVal.description;
  }

在按钮上显示文字单击Angular

1 个答案: