ng-container ng-for ng-if 数据类型

最新推荐文章于 2024-11-19 13:24:22 发布

转载最新推荐文章于 2024-11-19 13:24:22 发布 · 2.2k 阅读

文章标签：

#angular ng-container ng-for ng

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Angular框架实现的简单示例，展示了如何利用*ngFor指令进行列表数据的渲染，并通过*ngIf指令控制元素的显示与隐藏。示例中定义了一个包含三个元素的数组list，使用*ngFor循环遍历数组并将符合条件的前两项数据展示出来。

import {Component} from '@angular/core'

@Component({
    selector:'demo03',
    template:`
        <h1>这是demo03</h1>
        <ul>
            <ng-container *ngFor="let tmp of list;let myIndex=index">
                <li *ngIf="myIndex<2">
                    {{"index is "+myIndex+" value is "+tmp}}
                </li>
            </ng-container>
        </ul>
        <p *ngIf="flag">test</p>
    `,
})

export class Demo03Component{
    /*
        ts 指定数据类型
        count:number=1
        hasMore:boolean=true
    */
    list:Array<any>=[100,200,300];
    flag:boolean=false;
}