angular例子之ngFOr

html：

<h1>
    {{'this is title' | titlecase}}//管道怎么用？未知
</h1>
<div *ngIf="users.length > 0; else empty">
    <ul>
        <li *ngFor="let u of users; count as totalCount; index as i;">//命名挺规范滴，应该可以猜出来作用吧
            User123 {{i}} of {{totalCount}}---{{u.name}}--{{u.content}}
        </li>
    </ul>
</div>
<ng-template #empty> //else：上面对应
    There is no user
</ng-template>
<button (click)="addUser();">Add</button>
<button (click)="deleteUser();">Delete</button>

import {Component,OnInit} from '@angular/core';
import {Meta} from '@angular/platform-browser';
@Component({
    selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    users;
    constructor(private meta:Meta){

    }
    ngOnInit() {
        this.users = [];
        this.meta.addTag({//给meta也就是users添加数据
            name:"author",content:"Allen"
        })
    }

    addUser(){
        this.users.push({  //添加方法
            name:"mjx",content:"mamamama"
        });

        this.meta.updateTag({//我猜：刷新name为author后来删除了 界面没有报错，换了一个浏览器界面还是没有问题，这就郁闷了，是我不会搜吗
            name:"author",content:"Allen2"
        })
    }
    deleteUser(){
        this.users.shift();
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!