【angular5项目积累总结】遇到的一些问题以及解决办法

时间：2023-03-09 16:50:18
【angular5项目积累总结】遇到的一些问题以及解决办法

1.项目中字符串特别是\r\n,替换成br之后，在页面换行无法生效？

答：绑定元素 innerHTML。

 <div class="panel-body" [innerHTML]="proTxt(iosPkg.ReleaseNotes)"></div>
 proTxt(txt: string) {

        return txt && txt.replace(/\r?\n/g, "<br />").replace('undefined','暂无版本信息');

    }

 2.Error trying to diff '[object Object]'. Only arrays and iterables are allowed

答：问题原因是由于ngFor 循环的对象不是数组或者可遍历对象造成的，解决办法需要将之转成数组对象。项目里接口返回的是一个json object,我这里定义一个数组对象来push 这个object，就解决问题了！

<div class="panel panel-default" *ngFor="let andoridPkg of andoridPackage;let i = index;">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            {{currApp.Name}}

                            &nbsp;&nbsp;版本<font color="#ff0000">V{{andoridPkg.Version}}</font>

                            &nbsp;&nbsp;<span class="pkg-update-time">(更新时间:{{andoridPkg.CreatedOn | date: 'yyyy年MM月dd日'}})</span>

                            <a data-toggle="collapse" class="pkg-update-link" (click)="onCollapse(i,'andorid')" data-parent="#android" href="#collapse_android_{{i}}">

                                {{andoridPkg.isCollapse ? '收起' : '展开更多'}}

                                <i class="arrow {{andoridPkg.isCollapse ? 'arrow-up':'arrow-down'}}"></i>

                            </a>

                        </h4>

                    </div>

                    <div id="collapse_android_{{i}}" class="panel-collapse collapse">

                        <div class="panel-body" [innerHTML]="proTxt(andoridPkg.ReleaseNotes)"></div>

                    </div>

                </div>

                <div *ngIf="andoridPackage.length<=0">暂无版本记录</div>
 id: string;

    currApp: any = [];

    andoridPackage: any[] = [];

    iosPackage: any[] = [];

    ngOnInit(): void {

        this.actRouter.params.subscribe((params: Params) => {

            this.id = params["id"];

            this.appService.GetAppInfo(this.id, (rtv) => {

                this.currApp = rtv;

                rtv.AndoridPackage && this.andoridPackage.push(rtv.AndoridPackage);

                rtv.iOSPackage && this.iosPackage.push(rtv.iOSPackage);

            });

        });

    }

积累中，未完待续，随时更新...

相关文章