ngx-translate和*ngFor - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Angular *ngFor 列表的动画

如果你想为 ngFor 列表创建一个动画，当移除一个项目时，该项目会淡出，而其下方的剩余项目会缓慢向上滑动，你可以这样做。...fadeOutAndShrinkAnimation", [ transition(":leave", [ sequence([ query(".css-class-of-ngfor-list...), animate("600ms ease-in", style({ opacity: 0 })), ]), query(".css-class-of-ngfor-list

5451 0

Angular 工具篇之国际化处理

对于使用 Angular 框架的项目来说，我们可以利用以下第三方库，快速支持国际化： ngx-translate/core ngx-translate/http-loader ngx-translate-extract...这时候因为我们默认使用的简体中文，所以以下的模板的显示结果为 “首页”： {{"home" | translate}} 前面我们已经生成了 zh-cn.json、zh-hk.json 和...this.translate.use("en"); } ngx-translate-extract 这个库，除了能自动抽取模板中的使用 TranslatePipe 的字段之外，也可以抽取项目中应用TranslateDirective 和...文件都会新增一个新的属性，这里以 zh-cn.json 文件为例： { "hello": "", "home": "首页" } 接着我们需要分别更新 zh-cn.json、zh-hk.json 和...namespaced-json --format-indentation ' '", 这里需要注意的是 ngx-translate-extract 除了支持上述的参数外，还支持 --replace、--clean 和

2.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Angular 项目多国语言设置

React 和 Vue 项目同理～这里我们仅考虑简体中文和美国英文两种语言，使用的框架版本为 @angular/core: "~12.1.0" 在日常开发中，我们难免会引入第三方 UI 框架，那么这就涉及了第三方...这个有点麻烦，但是我们依然可以使用依赖库，比如 ngx-translate 实现，喜大奔普～安装依赖 npm install @ngx-translate/core --save npm install...@ngx-translate/http-loader --save 我们项目这里的对应版本号为： { "@ngx-translate/core": "^14.0.0", "@ngx-translate...这里我们新建了 zh-CN.json 和 en-US.json 两个文件。...generate compressed code' | translate }}，{{ 'download' | translate }} Xlsx {{ 'file' | translate }} 和

2.6K2 0

angular4实战（3）插件引入及封装

模块下面时，之前在app.component下声明的各种服务，不会生效，需要在stones模块下重新去挂载，这样是非常麻烦的，因此，在实际项目中，会将那些公用的服务，例如提醒服务，国际化服务（本项目使用了ngx-translate...做国际化，ngx-translate在网上的教程比较详尽，不做赘述）。...from '@angular/common'; import {FormsModule} from '@angular/forms'; import {TranslateModule} from '@ngx-translate

1K3 0

Angular Material 的设计之美

正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。官方列举了如下几点来解释“高质量”的含义。国际化和可访问性，以便所有用户都可以使用。...Material Design 有关的样式工具，包括变量、 function 和 mixin，都可以在 theming 文件中找到。... ngFor="let childLvl1 of menuItem.children...menulevel2">{{ childLvl1.name }} ngFor...ng-select ngx-formly ngx-progressbar ngx-translate ngx-toastr photoviewer

6.2K3 0

ng 基础语法

*ngFor(同vue中v-for类似) 使用方式 //.ts中 import { Component } from '@angular/core'; //装饰器语法 @Comonent({ selector...list:[{name:'tom',age:19},{name:"jarray",age:20},{name:"lishao",age:18}] } //app-main.html ngFor...//内部内容 *ngIf(同vue中v-if) 使用方式插值语法{{}}(和vue插值模板一样的) ngFor="let...item of list"> {{item.name}} 属性绑定 [] （和vue v-bind一样） ngFor="let item of list"...> {{item.name}} 事件绑定 () (和vue v-on效果类似，不过函数后要写

8541 0

AngularDart 4.0 高级-结构指令顶

NgFor和NgSwitch ...指令遵循相同的模式。 *ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号（*）语法通过模板属性到模板元素。...NgFor指令具有比本指南中显示的NgIf更多的功能，包括必需的和可选的。至少NgFor需要一个循环变量（let hero）和一个列表（heroes）。...微观语法分析器提取of和trackby，将首字母大写(of -> Of, trackBy -> TrackBy),并在它们前面加上指令的属性名称(ngFor),产生名称ngForOf和ngForTrackBy...Angular设置let-hero为上下文的$implicit属性的值，NgFor已经用当前迭代的hero初始化了它的值。 API指南描述了额外的NgFor指令属性和上下文属性。...研究NgIf和NgFor的源代码是了解更多信息的好方法。模板输入变量模板输入变量是一个变量，其值可以在模板的单个实例中引用。在这个例子中有几个这样的变量：hero，i和odd。

18.6K2 0

AngularDart4.0 指南- 显示数据顶

内嵌和单独的HTML之间的选择是一个品味，环境和组织政策的问题。这里的应用程序使用内联的HTML，因为模板很小，演示更简单，没有额外的HTML文件。...元素中的* ngFor是Angular“repeater”指令。...它将元素（及其子元素）标记为“repeater模板”： ngFor="let hero of heroes"> {{ hero }} 不要忘记* ngFor中的主要星号...在这种情况下，ngFor正在显示一个列表，但ngFor可以为任何Iterable对象重复项目。 @Component（directives：...）...）和toString（）方法定义了一个类。

7.1K1 0

angular的数据绑定条件判断

html文件 //条件判断：*ngIf是直接影响元素手否被渲染，而非控制元素的显示和隐藏 //*ngIf=“” html文件 falg为true bool为false 循环语句：*ngFor ngFor="let item of colors...事件类型)="方法名" ngFor

7371 0

AngularDart4.0 英雄之旅-教程-04明细顶

在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分在节点内添加内容hero模板变量来显示英雄属性...装饰英雄用户应该得到一个他们徘徊和被选中英雄的视觉提示。...这是你在ngFor指令中定义的同一个英雄变量。在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定的更多信息。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。格式化选中hero 当选择的英雄细节显示在列表下方时，很难在列表中识别选定的英雄。...你增加了选择英雄和显示英雄的细节的能力。您了解了如何在组件模板中使用核心指令ngIf和ngFor。您在CSS文件中定义了样式，并使用它们来设置应用程序的样式。

4.4K3 0

Angular 显示英雄列表

="let hero of heroes"> *ngFor 是一个 Angular 的复写器（repeater）指令。...不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。浏览器刷新之后，英雄列表出现了。...给英雄们应用样式表英雄列表应该富有吸引力，并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄时，应该给出视觉反馈。...你可以定义属于特定组件的私有样式，并且让组件所需的一切（代码、HTML 和 CSS）都放在一起。这种方式让你在其它地方复用该组件更加容易，并且即使全局样式和这里不一样，组件也仍然具有期望的外观。...@Component 元数据中指定的样式和样式表都是局限于该组件的。

6.1K7 0

Angular 6.x 指令快速入门

我们以 ngFor 指令为例： ngFor="let item of items; index as i; trackBy: trackByFn">...... 解析的过程如下： ngFor + (of -> Of) -> ngForOf ngFor + (trackBy -> TrackBy) -> ngForTrackBy...let 关键字声明一个模板输入变量，示例中的输入变量是 item 和 i。...let item 和 index as i 会被转换为 let-item 和 let-i="index" ngFor 指令在列表上循环，每个循环中都会设置和重置它自己上下文对象上的属性。...最后我们来看一下 ngFor 指令的定义： @Directive({selector: '[ngFor][ngForOf]'}) export class NgForOf implements DoCheck

4.6K4 0

Angular 循环内使用 material datepicker

material datepicker 需要用到模板变量，如果需要在循环出来datepicker可以这么干直接把 *ngFor 中的index传给[matDatepicker]，用来引用组件 *ngFor...onAddOrUpdate() { console.log(arguments); } } 模板 {{result.budgets|json}} ngFor...="let budget of result.budgets;index as i;"> ngFor="let editItem of budget.edits; index as j;

2.4K2 0

Angular 2 数据显示

本章节我们将为大家介绍如何将数据显示到用户界面上，可以使用以下三种方式：通过插值表达式显示组件的属性通过 NgFor 显示数组型属性通过 NgIf 实现按条件显示 ---- 通过插值表达式显示组件的属性...` }) export class AppComponent { title = '站点列表'; mySite = '菜鸟教程'; } Angular 会自动从组件中提取 title 和...mySite 属性的值，并显示在浏览器中，显示信息如下：使用 ngFor 显示数组属性我们也可以循环输出多个站点，修改以下文件： app/app.component.ts 文件： import {...template: ` {{title}} 我喜欢的网站: {{mySite}} 网站列表: ngFor

3.3K2 0

Angular2 之结构型指令几个概念

结构型指令结构型指令通过添加和删除 DOM 元素来改变DOM的布局。我们经常看到的内置的结构型指令有：ngIf、ngSwitch、ngFor。下面我们着重介绍ngIf。...它简化了ngIf和ngFor —— 无论是写还是读。 ngIf 接下来这两个ngIf范例的效果完全相同，只是我们写成了另一种风格： ngFor Angular把*ngFor转换成一个类似的形式： ngFor div --> ngFor="let hero of heroes">{{ hero }} ngFor with template --> ngFor let-hero [ngForOf]="heroes"> {{ hero }} <

4.2K2 0

angular知识点梳理第二篇-基本语法

文章目录前文回顾基本语法常见指令 NgModel NgFor NgIf Ng-container 管道前文回顾前面已经写了关于angular项目的基本介绍和如何创建一个angular项目，这一篇主要梳理一些...-- 使用{{}}进行数据的获取 --> {{inputData}} 运行效果 NgFor NgFor和我们js中的for循环渲染数据是一致的，所以这里是比较容易理解的，简单的演示一下.../home.component.less'] }) export class HomeComponent implements OnInit { //声明一个list类型的变量，用于验证NgFor...-- 默认的是没有key的，这里需要key的地方需要给index重新赋值， --> ngFor="let item of list">{{item.title}}...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素的显示与消失，这里和隐藏要区别开，他的效果和css中的display:none效果是一致的，和visibility

3.6K3 0

AngularDart4.0 指南- 模板语法二顶

下面是NgFor应用于的例子： ngFor="let hero of heroes">{{hero.name}} 您也可以将NgFor应用于组件元素，如下例所示： ngFor="let hero of heroes" [hero]="hero"> 不要忘记ngFor前面的星号（*）。...分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法分配给* ngFor的字符串不是模板表达式。这是一种微语法 - Angular解释的一种小语言。...ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}} 了解其他NgFor上下文值，例如NgFor...*ngFor和trackBy NgFor指令可能表现不佳，特别是在大型列表中。对一个项目，删除项目或添加项目的小改动可以触发DOM操作的级联。

34.7K2 0

Angular2 中的指令

一种带有模板的指令；使用component来装饰组件类属性指令：改变元素的外观或行为，如NgClass,NgStyle；使用Directive来装饰指令类结构指令：向DOM中添加或删除元素，如NgIf,NgFor...；使用Directive来装饰指令类绑定字段 {{username}} ngif和ngfor *ngIf="cuser.realname !

3K2 0

Angular 6.x 快速入门

address = { province: '福建', city: '厦门' } } 第三节 - 自定义组件在 Angular 中，我们可以通过 Component 装饰器和组件类来创建自定义组件...UserComponent { name: string; address: Address; // ... } 第四节 - 常用指令简介在 Angular 实际项目中，最常用的指令是 ngIf 和...ngFor 指令。... ngFor 指令简介该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。...ngFor 指令语法 ngFor="let item of items;">...

16.5K2 0

Angular 显示英雄列表

="let hero of heroes"> *ngFor 是一个 Angular 的复写器（repeater）指令。...不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。浏览器刷新之后，英雄列表出现了。...给英雄们应用样式表英雄列表应该富有吸引力，并且当用户把鼠标移到某个英雄上和从列表中选中某个英雄时，应该给出视觉反馈。...你可以定义属于特定组件的私有样式，并且让组件所需的一切（代码、HTML 和 CSS）都放在一起。这种方式让你在其它地方复用该组件更加容易，并且即使全局样式和这里不一样，组件也仍然具有期望的外观。...@Component 元数据中指定的样式和样式表都是局限于该组件的。

5.4K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭