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

我不是故意粗鲁，但我会建议你从棱角分明的文档here做一些英雄之旅教程。

你的模板错了。这是我认为你想要实现的一个例子：

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];

因为这不会（反转）每次点击的值。

我还建议查看this question以及有关将img放在按钮上的各种答案。

注意

将这两个名称称为同一个名称可能不是一个好主意：

onButtonTitleClicked(i)＆lt; - 这是调用方法

onButtonTitleClicked[i]＆lt; - 这是对数组元素i的引用

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

1 个答案: