Javascript 在类中的两个值之间切换

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

像这样的,

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

}

上面的代码抛出错误：未定义白色

我知道我的格式不正确，任何帮助将不胜感激

---

谢谢

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

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>

您的ts文件：

selected = 0;

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

当您单击该项目时，它将为其设置正常，其他项目将有nowrap

尝试此项

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

---

要在单击事件时执行此操作，只需设置和事件处理程序并传递控件。然后选中当前的类并应用您想要应用新类的逻辑

HTML

---

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

抛出错误：白色未定义您打算如何更改空白？通过单击某个东西或其他东西？我编辑了问题。请阅读我编辑的答案我的2美分-不能是typescript中标识符的一部分。抛出错误：白色不是定义编辑似乎是CSS规则而不是布尔变量。修复。。。我只是猜测这是一个变量，因为我们在这里的对话，它再次改变了所有项目的类别，而不是我单击的项目。这是因为你在开始的问题中没有提到任何关于单击的内容。但没问题，我的朋友。我已经编辑了我的答案，因此您可以为每个特定控件应用您想要的逻辑，避免设置变量变量组件ts文件中的空白是什么？空白实际上是一个css类属性，我想在单击时更改它。空白=='normal'？'nowrap'：“normal”由于setstyle的第二个参数没有意义，您应该检查文档中正在使用的呈现实现

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

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

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