Question

我正在研究Ionic 3项目。离子项目点击监听器目前面临问题。案例是，我在画布上添加了一个文本。现在添加文本后，我想更改文本样式。例如字体系列，字体大小，粗体和斜体。 UI明智的做法。但是我对ion-item的单击侦听器无法正常工作。我不知道我在做什么错。请看一次。

1。 HTML

<ion-row id="fontBar" *ngIf="isAddTextSelected">
    <ion-col col-4>
        <ion-item>
            <ion-label>Fonts</ion-label>
            <ion-select [(ngModel)]="selectedFont" (ionChange)="fontChange($event)">
                <ion-option *ngFor="let font of fonts" [value]="font.name" [ngStyle]="{'font-family': font.name}">{{font.name}}</ion-option>
            </ion-select>
          </ion-item>
    </ion-col>
  <ion-col col-4>
      <ion-item>
          <ion-label>Sizes</ion-label>
          <ion-select [(ngModel)]="selectedFontSize" (ionChange)="fontSizeChange($event)">
              <ion-option *ngFor="let fontSize of fontSizes" [value]="fontSize.size">{{fontSize.size}}</ion-option>
          </ion-select>
        </ion-item>
  </ion-col>
  <ion-col col-2>
      <ion-item tappable="true" (click)="selectBold()">
         <img src="assets/imgs/bold.png" />
      </ion-item>
  </ion-col>
  <ion-col col-2>
    <ion-item>
      <img src="assets/imgs/italic.png" (click)="selectItalic()"/>
    </ion-item>
  </ion-col>
  <!--<ion-col col-1>
      <ion-item>
        <img src="assets/imgs/underline.png"/>
      </ion-item>
    </ion-col>-->
</ion-row>

2。 CSS

#fontBar {
        position: absolute;
        bottom: 7%;
        height: 50px;
        width: 100%;
    }

3。打字稿文件

selectBold(){
  debugger;
  if(this.selectedTxtIndex >= 0){
    if(this.textAreasList[this.selectedTxtIndex].bold==""){
      this.textAreasList[this.selectedTxtIndex].bold = "bold";
    }else{
      this.textAreasList[this.selectedTxtIndex].bold = "";
    }
  }
}

selectItalic(){
  if(this.selectedTxtIndex  >= 0){
    if(this.textAreasList[this.selectedTxtIndex].italic==""){
      this.textAreasList[this.selectedTxtIndex].italic = "italic";
    }else{
      this.textAreasList[this.selectedTxtIndex].italic = "";
    }
  }
}

fontSizeChange(selectedVal){
  if(this.selectedTxtIndex  >= 0){
      this.textAreasList[this.selectedTxtIndex].fontSize = selectedVal;
  }
}

fontChange(selectedVal){
  if(this.selectedTxtIndex  >= 0){
      this.textAreasList[this.selectedTxtIndex].fontFamily = selectedVal;
  }
}

注意-我添加了调试器点，但单击事件未触发。甚至我搜索时，都说有人相对于绝对改变立场。即使它没有用。

任何帮助都是有意义的。

Answer 1

很抱歉，但这是我的错误，因为我先关闭了离子含量。

<ion-item>仅可在<ion-content>内部使用。

在<ion-content>之后关闭<ion-item>之后，一切正常。

离子3-离子项目点击无效

1 个答案: