时间戳

首页 > 解决方案 > Ionic/Angular - 使用链接更新标签名称以更改图片

angular - Ionic/Angular - 使用链接更新标签名称以更改图片

问题描述

我对 Ionic/Angular 非常陌生，我很难将标签从 0 1 2 更改为 Profile Group Friend 之类的其他名称。在 google 和 youtube 的帮助下，我能够做到这一点，但我花了几天时间试图弄清楚如何更改标签，但我无法找到更改标签的方法。如果有人可以帮助我，我将不胜感激。先感谢您！

HTML 文件中的代码

<ion-header [translucent]="false">
  <ion-toolbar color="primary">
    <ion-buttons slot="secondary">
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" name="search"> </ion-icon>
        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Pics</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <button *ngFor="let imageButton of imageButtons; let i = index" (click)="onClick(imageButton)"
    class="button">{{i}}</button>
  <img src="{{myimage || '/assets/test1.png'}}" (click)="addEvent();" />
  <h1>78%</h1>
</ion-content>

ts文件中的代码

export class IndividualstockPage implements OnInit {
imageSrc = '';
  messageText = '';
  imageButtons = [ {src:'/assets/Profile.png' } , 
  {src:'/assets/Group.png'}, 
  {src:'/assets/Friend.png'}]

  constructor() { }

  ngOnInit() {
  }
  onClick(imageNameObject) {
    this.imageSrc = imageNameObject.src;
    this.messageText = imageNameObject.name;}

};

正如您在屏幕上看到的那样，它显示 0 1 2，我正在寻找一种方法来提供描述而不是序列号应用程序/屏幕的屏幕截图

标签： angularionic-frameworkionic4

解决方案

在 HTML 中

<ion-header [translucent]="false">
  <ion-toolbar color="primary">
    <ion-buttons slot="secondary">
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button>
        <ion-icon slot="icon-only" name="search"> </ion-icon>
        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Pics</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <button *ngFor="let imageButton of imageButtons; let i = index" (click)="onClick(imageButton)"
    class="button">{{i}}</button>
  <img src="{{imageSrc || '/assets/test1.png'}}" (click)="addEvent();" />
  <h1>78%</h1>
</ion-content>

在 ts

imageButtons = [{src:'/assets/Profile.png',name:'Profile' } , 
  {src:'/assets/Group.png',name:'Group'}, 
  {src:'/assets/Friend.png',name:'Friend'}]

onClick(imageNameObject) {
    this.imageSrc = imageNameObject.src;
    this.messageText = imageNameObject.name;
}

推荐阅读