从ng-repeat到NgFor

看这篇文章基本明白怎么渲染模板，但是我的工程会报错说#号非法，这篇的写法也不好用。

angular2.0.0的语法集：

然后做了个练习：

如果照某些例子 import {Component,OnInit, NgFor, NgIf} from "@angular/core";//会报错

(1,27): error TS2305: Module '"F:/work/vs1/node_modules/@angular/core/index"' has no exported member 'NgFor'.
...

[0] (1,34): error TS2305: Module '"F:/work/vs1/node_modules/@angular/core/index"' has no exported member 'NgIf'.
[0] Child html-webpack-plugin for "index.html":

export class AmwayComponent implements OnInit{

    errorMessage:string;

    amwayData:any;

    constructor(private _globalService: GLobalService,private _uIHelperService:UIHelperService) {}

    ngOnInit() {

        let requestParams = new URLSearchParams();

        requestParams.set('id', '');

        this._globalService.ajaxCallerGet(this._globalService.getServiceURL('amway'), requestParams).subscribe(

            (data) => {

                this.amwayData=data;

                console.log("amway page data:::"+ data,this.amwayData);

            },

            error => this.errorMessage = <any>error

        );

    }

}

NgFor 和 NgIf 现在在Component里，不需要单独提出来导入， OnInit是用来导入data的方法。

export const htmlTemplate = `

    <div id = "amway">

        <img class="logo" src="{{amwayData?.logo}}">

        <div class="slogan">

            <p *ngFor="let slogan of amwayData?.slogans">{{slogan}}</p>

        </div>

        <div class="nav">

            <a *ngFor="let nav of amwayData?.navs">

              {{nav.name}}

            </a>

        </div>

        <div class="inner_content">

            <div class="left">

                <ul>

                    <li class="title">{{amwayData?.left.title}}</li>

                    <li *ngFor="let list of amwayData?.left.lists">

                        <p class="name">{{list.name}}</p>

                        <div class="subs" *ngIf="list.subs">

                            <p class="sub" *ngFor="let sub of list.subs">

                                {{sub}}

                            </p>

                        </div>

                    </li>

                </ul>

            </div>

            <div class="right">

                <p class="crumbs">

                    <span *ngFor="let crumb of amwayData?.right.crumbs">{{crumb}}</span>

                <p>

                <div class="inner_right">

                    <p class="table_top">

                    {{amwayData?.right.table_top}}

                    <p>

                    <p class="table_info"></p>

                </div>

            </div>

        </div>

    </div>

`;

data是这样的：

{

    "logo": "assets/images/logo.png",

    "slogans": ["您好，","某某"],

    "top": ["我的賬戶", "快速選購", "購物籃", "中心", "登出", "English"],

    "navs": [{ "name": "紐崔萊" }, { "name": "雅姿" }, { "name": "個人護理" },
{ "name": "家居護理" }, { "name": "家居科技" }, { "name": "其他產品" }, { "name": "優惠" }, 
{ "name": "產品配件" }, { "name": "XS" }],

    "left": { "title": "業績報告", "lists": [{ "name": "積分查詢", "subs": ["個人", "組內"] }, 
{ "name": "推薦先機獎金報告下載" }, { "name": "未送貨訂單資料壹組" }, { "name": "電子購貨單" }, 
{ "name": "組內尚未使用指優惠券記錄" }, { "name": "個人業績記錄" }, { "name": "推薦記錄" }, 
{ "name": "個人獎勵記錄" }, { "name": "直銷商/優惠顧客狀況查詢" }, { "name": "個人及組員資料查詢" }, 
{ "name": "個人優惠券" }, { "name": "個人訂單" }, { "name": "業務拓展非/電子 優惠 - - 概覽" }, 
{ "name": "業務拓展非/電子 優惠 - - 直系小組縱覽" }] },

    "right": {

        "crumbs": ["首頁 > ", "業務資訊 > ", "業績報告 > ", "積分查詢 > ", "組內"],

        "table_top":"组内",

        "search": ["搜尋直銷商", "優惠顧客編號", "搜尋"],

        "table": ["本月積分記錄", "獎金月份", "更新日期", "積分查詢", "直銷商/優惠顧客編號", 
　　　　　　　　　　"直銷商/優惠顧客姓名", "戶籍類別", "組內積分額", "加入日期", "轉型日期"]

    }

}