angular例子之ngFOr

前端之家收集整理的这篇文章主要介绍了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>

ts:
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();
    }
}

猜你在找的Angularjs相关文章