Question

我正在尝试制作一个字母书签。假设字符A到Z会将用户引导到具有此字母ID的第一个元素。它可以工作几秒钟。我的意思是，当我单击它时，我可以看到第一个带有所选字母的元素，但是在收到此错误后立即出现：

Runtime Error: Uncaught (in promise): invalid views to insert
c@http://localhost:8100/build/polyfills.js:3:19752
u/<@http://localhost:8100/build/polyfills.js:3:19174
NavControllerBase.prototype._fireError@http://localhost:8100/build/vendor.js:53343:13
NavControllerBase.prototype._failed@http://localhost:8100/build/vendor.js:53336:9
NavControllerBase.prototype._nextTrns/<@http://localhost:8100/build/vendor.js:53383:53
F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974
onInvoke@http://localhost:8100/build/vendor.js:5396:24
F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901
F</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124
f/<@http://localhost:8100/build/polyfills.js:3:20240
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649
onInvokeTask@http://localhost:8100/build/vendor.js:5387:24
F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562
F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815
o@http://localhost:8100/build/polyfills.js:3:7887
F</h</e.invokeTask@http://localhost:8100/build/polyfills.js:3:16823
p@http://localhost:8100/build/polyfills.js:2:27646
v@http://localhost:8100/build/polyfills.js:2:2789

我试图用Google搜索它，但是找不到它。

HTML：

<ion-header>
        <ion-navbar>
          <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
        </ion-navbar>
      </ion-header>

      <ion-content padding>
        <ion-list>
          <ion-item *ngFor="let a of alf">
           <a href="#{{a}}"> {{a}} </a>

          </ion-item>
        </ion-list>
          <ion-list>
              <ion-item *ngFor="let i of players">
                <button block (click)="showToast(i.player)" style="text-align:start;" id="{{i.player.slice(0,1)}}" >

                        <img src="{{i.logo}}" width="30%" height="100%" style="display: inline"  />

                <p  style="display: inline"> {{i.player}}</p>

                </button>
              </ion-item>
          </ion-list>

      </ion-content>

两个列表都正常打印，当我检查代码时，我可以看到锚点是我期望的样子，按钮带有id =“ letter”。

组件：

    import { Component } from "@angular/core";
    import { PlayersService } from "./players-service";
    import { Players } from "./players";
    import { ToastController } from "ionic-angular";

    @Component({
    selector: 'page-player',
    templateUrl: 'players.html'
      })
    export class PlayersPage{

    players : Players[];

    alf : String[];

    ngOnInit() : void{
        this.listar();
        this.alfabeto();
        let teste = this.teste("Banana");
        this.showToast("Funcionando " + teste);
    }

    constructor(private service : PlayersService, private toastCtrl : ToastController){

    }

    listar(){
        this.service.findAll().subscribe(res=>{
            this.players= res;
        });
    }

      showToast(data : string) : void{
    let toast = this.toastCtrl.create({
    message : data,
    duration : 5000,
    position: 'bottom'
    });
    toast.present(toast);
    }

    alfabeto(){
        this.alf = ['2','A','B','C','D','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','X','Y','Z'];
    }

    teste(player : string) : String{
        console.log(player);
        let a = player.slice(0,1);
        return a;
    }

}

“ alfabeto（）”是填充字母数组的函数。 teste（）将切片名称，直到最后一个字母为止。我无法真正显示被添加书签的列表，因为它不是我的，但是除了字母y和b外，还有一个小写字母的元素（我会在后面修复），所有其他元素都是大写的。您有什么线索为什么这行不通？

代码生成的书签导致错误-Ionic 3

0 个答案: