use new data struct

app/app-detail.component.html

-<h1>{{name()}}</h1>
+<h1>{{name}}</h1>
 
-<div *ngIf="!isInstalled()">
+<div *ngIf="!isInstalled">
     <button type="button" class="btn btn-primary">安装</button>
     <button type="button" class="btn btn-secondary">导入</button>
     <button type="button" class="btn btn-secondary">正版代购</button>
 </div>
-<div *ngIf="isInstalled()">
+<div *ngIf="isInstalled">
     <button type="button" class="btn btn-primary">运行</button>
     <button type="button" class="btn btn-secondary">设置</button>
     <button type="button" class="btn btn-secondary">游览本地文件</button>

app/app-detail.component.ts

 import { Component } from '@angular/core';
 import { AppsService } from './apps.service'
 import { RoutingService } from './routing.service'
+
+//import 'rxjs/Rx';
+import {App} from "./app";
 @Component({
     selector: 'app-detail',
     templateUrl: 'app/app-detail.component.html',
     styleUrls: ['app/app-detail.component.css'],
 })
 export class AppDetailComponent {
-    name() {
-        if(this.appsService.detail[this.routingService.app])
-        {
-            return this.appsService.detail[this.routingService.app].name;
+
+    _currentApp;
+    get currentApp(): App {
+
+        let data = this.appsService.data;
+        let tmp;
+        if(data) {
+            tmp = data.find((v)=>v.id === this.routingService.app);
+            return tmp;
         } else {
-            return this.appsService.detail["default"].name;
         }
+    }
+
+    _name;
+    get name() {
+        if(this.currentApp) {
+            return this.currentApp.name[this.currentApp.locales[0]];
+        }
+        return "Loading";
     };
 
-    isInstalled() {
-        if(this.appsService.detail[this.routingService.app])
-        {
-            return this.appsService.detail[this.routingService.app].isInstalled;
-        } else {
-            return this.appsService.detail["default"].isInstalled;
+    _isInstalled;
+    get isInstalled() {
+        if(this.currentApp) {
+            if(this.currentApp.local.path) {
+                return true;
+            }
         }
+        return false;
     }
 
+
     constructor(private appsService: AppsService, private routingService: RoutingService ) {
     }
 

app/app.ts

@@ -28,8 +28,26 @@ export class App {
     tags: string[];
     version: string;
     local: AppLocal;
+    constructor(app: AppInterface) {
+        this.id = app.id;
+        this.name = app.name;
+        this.description = app.description;
+        this.author = app.author;
+        this.homepage = app.homepage;
+        this.category = app.category;
+        this.actions = app.actions;
+        this.references = app.references;
+        this.locales = app.locales;
+        this.download = app.download;
+        this.news = app.news;
+        this.tags = app.tags;
+        this.version = app.version;
+        this.local = app.local;
+    }
 }
 
+export interface AppInterface extends App {
+}
 /*export interface TestInterface {
  id: string;
  name: {[locale: string]: string};

app/apps.component.html

@@ -10,7 +10,7 @@
        class="list-group-item list-group-item-action"
        [ngClass]="{active: app.id==routingService.app}"
     >
-        {{app.name}}
+        {{app.name[app.locales[0]]}}
     </a>
     <a href="#" class="list-group-item list-group-item-action disabled">{{routingService.app}}</a>
 </div>
\ No newline at end of file

app/apps.component.ts

@@ -14,22 +14,14 @@ export class AppsComponent {
             console.log(appsService.data)
             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);
             }
         });
     }
 
     selectApp(id) {
         this.routingService.app = id;
-        this.getDetail();
     }
 
-    getDetail() {
-        for(let i = 0; i < this.appsService.data.length; i++){
-            let x = this.appsService.data[i];
-            if(x.id == this.routingService.app) {
-                this.appsService.detail[this.routingService.app] = x;
-            }
-        }
-        console.log(this.appsService.detail);
-    }
 }

app/apps.service.ts

 import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
 import 'rxjs/Rx';
+import {App} from "./app";
+import {AppLocal} from "./app-local";
 
 @Injectable()
 export class AppsService {
-    data;
-
-    detail = {
-        "default": {
-            "id": "id",
-            "name": "name",
-            "isInstalled": false
-        },
-    }
+    data : App[];
 
     constructor(private http: Http) {
     }
 
     getApps(callback) {
         this.http.get('./apps.json')
-            .map(response => response.json())
+            .map(response => {
+                return response.json()
+            })
             .subscribe(data => {
-                this.data = data
+                this.data = data;
+                console.log(this.data);
                 if(typeof(callback) === 'function') {
                     callback();
                 }
             });
-
     }
 
-}
\ No newline at end of file
+
+}

apps.json

 [
   {
     "id": "th105",
-    "name": "东方绯想天",
-    "isInstalled": true
+    "name":
+    {
+      "zh-CN": "东方绯想天"
+    },
+    "description": {
+      "zh-CN": "fxt desc"
+    },
+    "author": "ZUN",
+    "homepage": "http://www.myacg.cc",
+    "category": "ACT",
+    "actions": {
+      "darwin": {
+        "main": {
+          "execute": "",
+          "args": [],
+          "env": "",
+          "open": ""
+        }
+      }
+    },
+    "references": {
+      "id": "",
+      "type": "runtime"
+    },
+    "locales": ["zh-CN"],
+    "download": "",
+    "news": [{
+      "title": "title",
+      "url": "",
+      "image": ""
+      }
+    ],
+    "tags": ["ACT"],
+    "local": {
+      "path": "",
+      "version": ""
+    }
   },
   {
     "id": "th12",
-    "name": "东方地灵殿",
-    "isInstalled": false
-  },
-  {
-    "id": "th13",
-    "name": "东方UFO",
-    "isInstalled": false
+    "name":
+    {
+      "zh-CN": "地灵殿"
+    },
+    "description": {
+      "zh-CN": "th12 desc"
+    },
+    "author": "ZUN",
+    "homepage": "http://www.myacg.cc",
+    "category": "ACT",
+    "actions": {
+      "darwin": {
+        "main": {
+          "execute": "",
+          "args": [],
+          "env": "",
+          "open": ""
+        }
+      }
+    },
+    "references": {
+      "id": "",
+      "type": "runtime"
+    },
+    "locales": ["zh-CN"],
+    "download": "",
+    "news": [{
+      "title": "title",
+      "url": "",
+      "image": ""
+    }
+    ],
+    "tags": ["ACT"],
+    "local": {
+      "path": "/foo/bar",
+      "version": "10.3"
+    }
   }
 ]
\ No newline at end of file