Question

我是离子领域的新手。我做了一个弹出窗口。现在，我想在弹出框上添加标签。在这里，我使用了www.w3schools.com上的javascript标签。它运行，但是当我单击一个选项卡时，它显示运行时错误opencity功能未定义。我该如何解决？

popover.html

TrueTime.now();

popover.ts

<!-- Generated template for the PopoverComponent component -->
<div class="bg-image" style="height: 300px;">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>

Answer 1

在popover.html中，必须将onclick更新为（点击）函数，例如：

<!-- Generated template for the PopoverComponent component -->
  <div class="bg-image" style="height: 300px;">
    <div class="tab">
      <button class="tablinks" (click)="openCity(event, 'London')">London</button>
      <button class="tablinks" (click)="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" (click)="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    ....
  </div>

PopoverComponent类中的popover.ts文件如下：

import { Component } from '@angular/core';
@Component({ selector: 'popover', templateUrl: 'popover.html' })

export class PopoverComponent {

    text: string;

    constructor() {
        console.log('Hello PopoverComponent Component');
        this.text = 'Hello World';
    }

    openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
}

使用Ionic3进行函数调用时出现运行时错误

1 个答案: