在类中切换2个值

时间:2018-03-03 12:04:57

标签: javascript angular ionic-framework

我想在一个类中切换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');

}

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

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

由于

3 个答案:

答案 0 :(得分:-1)

试试这个

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

答案 1 :(得分:-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

答案 2 :(得分:-2)

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

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