首页 > 下载 > 下载详文:ionic和Angular项目的ngFor数据绑定

ionic和Angular项目的ngFor数据绑定

发布时间:2023年12月19日 13时05分10秒   属性:程序Web开发 > Web综合    访问次数:9618
字体: 初始 添加收藏 分享给好友

在ionic和Angular项目中我们实践过程知道,这类项目虽然是JavaScript、html5、css等语言作为基数,但实质他已经具备复杂数据开发能力,而不是简单web1.0时代的网页前端思路,尽管有网页前端基因,但更像是应用程序开发思路。本文通过实际示例展示前端数据如何绑定数据到前端页面,这是也以往的html不同ionic或Angular已经完整的将html和JavaScript后端分开。本文不会对基础的ionic或Angular安装配置配置作出介绍,基础部分将在其他文章讲解。

准备工作:先创建ionic项目,项目名为“myList”,通过dos命令面板创建,先将dos命令切换到自己想要创建的盘符和文件目录下,输入命令:“ionic start myList blank”。创建成功之后,启动项目,输入命令:“ionic serve -o”,即在浏览器中打开运行项目程序。然后在Visual Studio Code中打开启动,在命令面板输入:“code .”即可从visual studio code中启动打开项目。

在visual studio code中打开之后,可以看到项目工程文件目录,展开“src>home>home.page.html”打开文件页面。同时在菜单“Terminal”下“New Terminal”新打开命令窗口,同样可以输入相应的ionic或Angular命令,启动运行“ionic serve”启动在浏览器中预览。

示例:在app.component.ts中定义一个citys数组,用于view页面数据绑定 public citys=["北京","上海","广州","香港"],详细代码如下:

JavaScript 代码  复制
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
public citys=["北京","上海","广州","香港"]
constructor() {}
}

在app.component.html中,通过“*ngFor”遍历数据,将数据绑定到ionc标签元素中,在“ion-content”内容标签中加入ul标签,在li元素中绑定对于数组城市,关键用法: <li *ngFor="let city of citys; index as i">{{i}}-{{city}}</li>,此处*ngFor赋值"let city of citys; index as i",分两层含义,第一层:“let city of citys”即通过city是将数组citys集合中的子集取出,如同forech遍历,从数组citys集合中循环读出。第二层:“index as i”这是编号,如同for循环中的i,从0开始递增,范围即是数组的索引长度。绑定值显示:“{{i}}-{{city}}”,以双重大括号指定字段。其次修改页面标题,修改ion-title值为Citys,详细代码:

ionic 代码  复制
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
citys
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">citys</ion-title>
</ion-toolbar>
</ion-header>

<ion-content class="padding" color="light">
<div style="padding: 15px;">
<ul>
<li *ngFor="let city of citys; index as i">{{i}}-{{city}}</li>
</ul>
</div>
</ion-content>

在Terminal输入启动命令:ionic serve,提示:当ionic启动后,每次修改页面,只需要“Ctrl+s”保存页面就会自动刷新更新。预览效果如下:


select元素绑定数据:接着在页面加入select元素,将数组数据绑定给select的option的value和显示text值, 关键代码: <option *ngFor="let city of citys; index as i" value="{{i}}">{{city}}</option>,将value值绑定“{{i}}”索引值,text文字显示部分绑定{{city}},段落代码如下:

ionic 代码  复制
……
<h3>select</h3>
<select>
<option *ngFor="let city of citys; index as i" value="{{i}}">{{city}}</option>
</select>
……

效果如下:

ionic下拉选择绑定数据: ion-select 是在ionic框架下的select,关键代码: <ion-select-option option *ngFor="let city of citys; index as i" value="{{i}}">{{city}}</ion-select-option>,详细代码:

ionic 代码  复制
……
<ion-select>
<ion-select-option option *ngFor="let city of citys; index as i" value="{{i}}">{{city}}</ion-select-option>
</ion-select>

效果如下:

ionic Checkbox list多选列表绑定数据:

加入ion-list标签,然后在ion-list中加入ion-item,ion-item加入ion-checkbox和ion-label,绑定关键代码:<ion-list *ngFor="let city of citys; index as i;last as l">,此处*ngFor有三层含义,前面两层含义已经在上面说明,这里加入“last as l”指定末尾最后一项为“true”, <ion-checkbox value="{{i}}" checked="{{l}}"></ion-checkbox>此处checked值为Bool布尔型,指定末尾项为true后,那么最后一项默认checked值为true,value和上面规则相同;<ion-label>{{city}} - {{l}}</ion-label>这里便于查看绑定结果,同时指定了{{city}}和{{l}}。详细代码:

ionic 代码  复制
……
<h3>checkbox list</h3>
<ion-list *ngFor="let city of citys; index as i;last as l">
<ion-item>
<ion-checkbox value="{{i}}" checked="{{l}}"></ion-checkbox>
<ion-label>{{city}} - {{l}}</ion-label>
</ion-item>
</ion-list>

效果如下:

ionic radio button单选项数据绑定:加入ion-radio-group标签,在其内加入依次嵌入ion-item、ion-radio标签,绑定关键代码: <ion-item *ngFor="let city of citys; index as i;odd as o">此处odd as o索引值为偶数是设为true;<ion-radio value="{{i}}" ></ion-radio><ion-label>{{city}} - {{o}}</ion-label>此处label同时绑定{{city}}和 {{o}}便于查看结果,代码如下:

ionic 代码  复制
<h3>radio button</h3>
<ion-radio-group [allowEmptySelection]="false" value="1">
<ion-item *ngFor="let city of citys; index as i;odd as o">
<ion-radio value="{{i}}" ></ion-radio><ion-label>{{city}} - {{o}}</ion-label>
</ion-item>
</ion-radio-group>

效果如下:

其它过滤:

  • last as l  ---- 索引最后一项为true
  • first as f ---- 索引第一项为true
  • odd as o --- 索引值为偶为true
  • even as e -- 索引值为奇为true


免费
ionic和Angular项目的ngFor数据绑定 (0)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .