HTML

Question

我想在一个类中切换2个值。

像这样，

<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 part：

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

你的ts档案：

selected = 0;

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

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

Answer 3

要在click事件上执行此操作，只需设置和事件处理程序并传递控件。然后chech哪个是你当前的类并应用你想要应用新逻辑的逻辑

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');
  }

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

在类中切换2个值

3 个答案:

HTML

TS