在类中的2个值之间切换[关闭]

Question

我想在一个类中的两个值之间切换。

这样的，

<ion-item *ngFor="let part of partner" class="border_bottom bdr_radius">
<p class="font_c_2 gra_reg" #short (click)="onShowHide(short)" [ngStyle]="{'white-space': whiteSpace}">
  {{part.fsp_partner_location}} 
</p>
</ion-item>

public onShowHide(controlToShow) {

this.render.setStyle(controlToShow, white-space=='normal' ? 'nowrap' : 'normal');

}

以上代码抛出错误：“白色未定义”

我知道我的格式不正确，我们将不胜感激。

谢谢

Answer 1

试试这个

this.render.setStyle(controlToShow, white-space=='normal' ? 'nowrap' : 'normal');

Answer 2

现在，当我知道您的代码时，我会这样做：

HTML 部分：

<ion-item *ngFor="let part of partner; let i=index" class="border_bottom bdr_radius"> 
<p class="font_c_2 gra_reg" #short (click)="onShowHide(i)" [ngClass]="{'long': selected === i, 'short': selected != i}"> 
{{part.fsp_partner_location}} 
</p> 
</ion-item>

css 部分：

.long {
    white-space: normal;
}
.short{
        white-space: nowrap;
}

你的 ts 文件：

selected = 0;

onShowHide(index: number) {
   this.selected = index;
}

当您单击项目时，它将为其设置normal，其他人将设置have nowrap

Answer 3

要在单击事件上执行此操作，只需设置事件处理程序并传递控件即可。然后检查哪个是您当前的课程并应用您想要应用新课程的逻辑

Demo here

HTML

  <ion-item *ngFor="let item of items">
    <h3 #text>{{item}}</h3>
    <button ion-button item-right color="light" (click)="onSwitch(text)">Switch Primary / Danger</button>
    <button ion-button item-right (click)="onPrimary(text)">Set Primary</button>
    <button ion-button color="danger" item-right (click)="onDanger(text)">Set Danger</button>
  </ion-item>

TS

  public items: string[] = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4",
    "Item 5",
    "Item 6",
    "Item 7",
    "Item 8",
    "Item 9",
    "Item 10",
  ];

  constructor(public navCtrl: NavController, private render: Renderer2) { }

  public onSwitch(control) {
    if(control.classList.contains('primary')){
      this.render.removeClass(control, 'primary');
      this.render.addClass(control, 'danger');
    }
    else{
      this.render.removeClass(control, 'danger');
      this.render.addClass(control, 'primary');
    }

  }
  public onPrimary(control) {
    this.render.addClass(control, 'primary');
  }
  public onDanger(control) {
    this.render.addClass(control, 'danger');
  }

否则，请使用其他答案之一