Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/wix/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Ionic2 Angular2文本代码指令在ionic 2项目中不起作用_Ionic2_Angular2 Directives - Fatal编程技术网

Ionic2 Angular2文本代码指令在ionic 2项目中不起作用

Ionic2 Angular2文本代码指令在ionic 2项目中不起作用,ionic2,angular2-directives,Ionic2,Angular2 Directives,我正试图从中实现Angular2文本标记器directiv,但它不起作用。我得到了div,div是空的,没有滚动文本 对于测试,我将示例代码添加到我的项目中进行测试 <ion-avatar item-left> <span class="story-username">{{getUsername()}}</span> <ion-icon name="icon-mapporia-edit" role="img" class="icon ic

我正试图从中实现Angular2文本标记器directiv,但它不起作用。我得到了div,div是空的,没有滚动文本

对于测试,我将示例代码添加到我的项目中进行测试

<ion-avatar item-left>
    <span class="story-username">{{getUsername()}}</span>
    <ion-icon name="icon-mapporia-edit" role="img" class="icon icon-ios ion-ios-icon-mapporia-edit story-edit" aria-label="icon mapporia-edit" ng-reflect-name="icon-mapporia-edit"></ion-icon>
    <p class="story-location">{{story.location}}</p>
    <div class="tickerContainer myStyles">
        <div ticker [trigger]="'auto'" [text]="'A statically-typed, long string'" [speed]="50" [padding-right]="40" [size]="20"></div>
    </div>
    <p class="story-time">{{calculatePostedTime()}}</p>
    <rating [(ngModel)]="story.ratingAvarege" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false"></rating>
    <p class="story-subject">{{story.subject}}</p>
</ion-avatar>
<li class="thumnail-list" *ngFor="let image of story.images">
    <img-loader [src]="image" [spinner]="true" class="thumnails" alt="Story Image" id="story-image">
    </img-loader>
</li>
如果有人有经验帮我解决这个问题。 thnx

我发现了一只虫子。 请按照给出的方法更正以下方法:

getTextWidth(): number {
        let t = this.r.createElement( document.getElementById('ghost'), 'div' );

        // this.r.setText( t, this.text ); // not working, oddly
        t.innerHTML = this.text; // quick fix

        this.r.setElementStyle( t, 'font-size', this.size + 'px');
        let w = t.offsetWidth;
        t.innerHTML = '';
        return w;
    }

我也面临着和你一样的问题。您提供的链接中的ticker指令包含一些错误

老的-

createTickerNode(self:any,text:string):any{
self=this.r.createElement(this.el.nativeElement,'span');
this.r.setElementStyle(self,'padding right',this.paddingRight+'px');
this.r.setElementStyle(self,'font-size',this.size+'px');
this.r.setText(self,text);
回归自我;
}
更新的-

createTickerNode(self:any,text:string):any{
self=this.r.createElement(this.el.nativeElement,'span');
this.r.setElementStyle(self,'padding right',this.paddingRight+'px');
this.r.setElementStyle(self,'font-size',this.size+'px');
//this.r.setText(self,text);//奇怪的是,它不工作
self.innerHTML=this.text;//快速修复
回归自我;
}
用新代码替换ticker指令中的旧代码。
希望这将有助于解决您的问题。如果是,请将我的答案标记为正确:)

谢谢您的建议@g00glen00b,我已经编辑了我的答案
.tickerContainer {
        overflow-x: hidden;
        overflow-y: scroll;
        white-space: nowrap;
    }

    #ghost {
        display: inline-block;
        height: 0;
        position: absolute;
    }

    .myStyles {
        background: #eee;
        color: blue;
        border: 1px solid #ddd;
        max-width: 200px;
        cursor: pointer;
    }
getTextWidth(): number {
        let t = this.r.createElement( document.getElementById('ghost'), 'div' );

        // this.r.setText( t, this.text ); // not working, oddly
        t.innerHTML = this.text; // quick fix

        this.r.setElementStyle( t, 'font-size', this.size + 'px');
        let w = t.offsetWidth;
        t.innerHTML = '';
        return w;
    }