显示ngfor按钮角度上的图像和文本

Question

我试图创建三个按钮，每个按钮显示一个图像和一个文本。但这不管用，我也不明白为什么。

我想要实现的是，当我点击三个按钮中的一个按钮时，图像和文本就会出现。这个图像和文本对于每个按钮都是唯一的，我必须使用ngFor。

这是我的代码：

component.ts

export class FeaturesComponent implements OnInit {
    title = 'Features';

    buttonData = [{
        title: 'Prediction',
        description: 'text',
        img: '../../assets/prediction.png'
    },
    {
        title: 'Rebalancing',
        description: 'text',
        img: '../../assets/rebalancing.png'
    },
    {
        title: 'Visualization',
        description: 'text',
        img: '../../assets/visualization.png'
    }];
}

component.html

<h1>{{ title }}</h1>
<tr class="btn-group" *ngFor="let button of buttonData">
  <td>
    <button (click)="button.description; button.img">{{button.title}}</button>
  </td>
</tr>

Answer 1

我不想粗鲁，但我会建议你做的英雄之旅教程从角博士这里。

你的模板错了。以下是我认为你们正在努力实现的目标的一个例子：

component.html

<h1>{{ title }}</h1>

<tr class="btn-group" *ngFor="let button of buttonData; i = index">
 <td>
  <button (click)="onButtonTitleClicked(i)">
    {{button.title}}
    <ng-template *ngIf="isButtonTitleClicked[i]">
       <p>{{button.description}}</p>
       <img src="{{button.img}}">
    </ng-tempalte>
  </button>
 </td>
</tr>

component.ts

isButtonTitleClicked: Array<boolean>;

public onButtonTitleClicked(i: number): void {
   # whatever you want to happen when button is clicked
   this.isButtonTitleClicked[i] = true;
}

由于ngFor创建了多个按钮，因此需要知道单击哪个按钮。因此，我们将'i = index‘添加到ngFor中，这样就可以识别单击了哪个按钮。

在组件中，我们创建一个布尔数组，以便存储每个按钮的真/假状态(单击或不单击)。因此，现在单击按钮时，我们将该按钮的索引传递给click方法，并在数组中设置值。

ngIf将只显示数组中该成员设置为true的按钮的模板。

这是一种非常基本的方法。想想用户如何将值设置为false？是否另一次单击将其再次隐藏-如果这样做更好：

this.isButtonTitleClicked[i] = !this.isButtonTitleClicked[i];

因为这不会(反转)每次点击的值。

我还建议查看这个问题和关于将img放在按钮上的各种答案。

注意事项

也许称呼这2名为同一个名字并不是个好主意：

onButtonTitleClicked(i) <- -这是调用方法

onButtonTitleClicked[i] <- -这是对数组的元素i的引用