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