app list

app/app-detail.component.html

@@ -218,4 +218,3 @@
         </form>
     </div>
 </div>
-

app/apps.component.html

+<span>已安装</span>
 <ul class="nav nav-sidebar">
-    <li *ngFor="let app of apps" [class.active]="app.id==routingService.app"><a
-            (click)="selectApp(app.id)"
-            href="#"
-    >
-        {{app.name[app.locales[0]]}}
-    </a></li>
+    <li *ngFor="let app of grouped_apps.installed" [class.active]="app.id==routingService.app">
+        <a (click)="selectApp(app.id)" href="#">{{app.name[app.locales[0]]}}</a>
+    </li>
+</ul>
+<span>未安装</span>
+<ul class="nav nav-sidebar">
+    <li *ngFor="let app of grouped_apps.not_installed" [class.active]="app.id==routingService.app">
+        <a (click)="selectApp(app.id)" href="#">{{app.name[app.locales[0]]}}</a>
+    </li>
 </ul>
 <!--<ul class="nav nav-sidebar">
     <li><a href="">Nav item</a></li>

app/apps.component.ts

-import { Component } from '@angular/core';
-import { AppsService } from './apps.service'
-import { RoutingService } from './routing.service'
+import {Component} from '@angular/core';
+import {AppsService} from './apps.service'
+import {RoutingService} from './routing.service'
 
 @Component({
     selector: 'apps',
@@ -9,10 +9,10 @@ import { RoutingService } from './routing.service'
 })
 export class AppsComponent {
 
-    constructor(private appsService: AppsService, private routingService: RoutingService ) {
-        appsService.getApps(()=>{
+    constructor(private appsService: AppsService, private routingService: RoutingService) {
+        appsService.getApps(()=> {
             //console.log(appsService.data)
-            if(appsService.data.length > 0) {
+            if (appsService.data.length > 0) {
                 this.selectApp(appsService.data[0].id);
                 let tmp = this.appsService.data.filter((v)=>v.id === this.routingService.app);
                 //console.log(tmp);
@@ -27,20 +27,31 @@ export class AppsComponent {
         let data = this.appsService.data;
         let apps;
 
-        if(data) {
-            apps = this.appsService.data.filter((app)=>{
+        if (data) {
+            apps = this.appsService.data.filter((app)=> {
                 return contains.includes(app.category);
             });
         }
 
-        return apps;
+        return apps || [];
     }
 
     selectApp(id) {
         this.routingService.app = id;
         this.appsService.createInstallConfig(id);
+    }
 
+    get grouped_apps() {
+        let result = {'installed': [], 'not_installed': []};
 
+        for (let app of this.apps) {
+            if (app.local) {
+                result.installed.push(app)
+            } else {
+                result.not_installed.push(app)
+            }
+        }
+        return result
     }
 
 }