Angular 权威教程 | 第4章 内置指令

作者:ca88编程

ca88编程 1

ca88编程 2

2.1在Allfilters.h里面增添filter的ID

总结

Angular的骨干指令数量少之又少,但大家却能因而整合这么些总结的通令来创制异彩纷呈的使用

ca88编程 3

按开荒页面的新闻,给那个地址打款就能够了。 

2.2在Alldescs.h里面增加filter结构体变量

ngClass

ngClass指令在HTML模板中用ngClass属性来代表,令你能动态设置和转移一个给定DOM成分的CSS类

.bordered {
border: 1px dashed black;
background-color: #eee;
}
// 简单用法
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

跻身获取!!!!进来获取!!!!

点击充钱按键,输入充钱数额 

4.filter创立注意事项

简介

停放指令是早就导入过的,你的组件能够一向运用它们。 因而,不用像您自己的机件同样把它们充作指令导入进来。

ca88编程 4

ca88编程 5

4.1 filter里面数据流要对应

MSFilterDesc ms_amr_dec_desc={
        MS_AMR_DECODER_ID,
        "amrDec",
        "amr decoder",
        MS_FILTER_DECODER,
        "amr",
        1,  //进
        1,  //出
        dec_init,
        dec_preprocess,
        dec_process,
        dec_postprocess,
        dec_uninit,
        dec_methods
};

以上是编码器filter,是生龙活虎进生机勃勃出,原始数据进去出来编码后的数据。

MSFilterDesc ms_tcpclient_send_desc={
        MS_TCP_SEND_ID,
        "TcpClientSend",
        "TcpClient_Send",
        MS_FILTER_OTHER,
        "tcpclient",
        1,  //进
        0,  //出
        tcp_send_init,
        tcp_send_preprocess,
        tcp_send_process,
        tcp_send_postprocess,
        tcp_send_uninit,
        tcpclient_send_methods
};

上述是TCP数据发送filter,只有进未有出,数据进来以往都发送数据都发送出去了

ca88编程,ngFor

再度一个加以的DOM元素(或生机勃勃组DOM成分卡塔 尔(英语:State of Qatar),每便重复都会从数组中取五个两样的值。

this.cities = ['Miami', 'Sao Paulo', 'New York'];

<h4 class="ui horizontal divider header">
Simple list of strings
</h4>
<div class="ui list" *ngFor="let c of cities">
<div class="item">{{ c }}</div>
</div>

ca88编程 6

选拔ngFor指令的结果

// 根据每一行数据渲染出一个表格
this.people = [
    { name: 'Anderson', age: 35, city: 'Sao Paulo' },
    { name: 'John', age: 12, city: 'Miami' },
    { name: 'Peter', age: 22, city: 'New York' }
];

<h4 class="ui horizontal divider header">
    List of objects
</h4>
<table class="ui celled table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tr *ngFor="let p of people">
        <td>{{ p.name }}</td>
        <td>{{ p.age }}</td>
        <td>{{ p.city }}</td>
    </tr>
</table>

ca88编程 7

渲染对象数组

// 使用嵌套数组
this.peopleByCity = [
    {   city: 'Miami',
        people: [
            { name: 'John', age: 12 },
            { name: 'Angel', age: 22 }
        ]
    },
    {   city: 'Sao Paulo',
        people: [
            { name: 'Anderson', age: 35 },
            { name: 'Felipe', age: 36 }
        ]
    }
]

<h4 class="ui horizontal divider header">
    Nested data
</h4>
<div ngFor="let item of peopleByCity">
    <h2 class="ui header">{{ item.city }}</h2>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tr ngFor="let p of item.people">
            <td>{{ p.name }}</td>
            <td>{{ p.age }}</td>
        </tr>
    </table>
</div>

ca88编程 8

渲染嵌套数组

获取索引

在迭代数组时,大家可能也要获取每意气风发项的目录。大家能够在ngFor命令的值中插入语法let idx = index并用分号分隔断, 那样就足以拿走索引了。

ca88编程 9

应用索引

本文由ca88发布,转载请注明来源

关键词: ca88网址 日记本 博客 Angular...