1. 程式人生 > >【angular5項目積累總結】遇到的一些問題以及解決辦法

【angular5項目積累總結】遇到的一些問題以及解決辦法

style date note 由於 service nco lac array 記錄

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);
            });
        });

    }

積累中,未完待續,隨時更新...

【angular5項目積累總結】遇到的一些問題以及解決辦法