首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular ngFor不适用于材质,因为它不是已知属性

Angular中的ngFor指令用于循环遍历一个集合,并为每个元素生成相应的HTML代码。它是Angular框架中常用的指令之一,用于动态地渲染列表或表格等数据。

然而,ngFor指令并不适用于材质(Material)组件,因为材质组件的属性结构与普通的HTML元素不同。材质组件是基于Angular Material库构建的,它提供了一套美观、可定制的UI组件,用于创建现代化的Web应用程序。

相反,对于材质组件,我们可以使用MatTableDataSource来实现类似的功能。MatTableDataSource是Angular Material库中的一个数据源类,用于管理和展示数据。它可以与MatTable(材质表格)组件一起使用,以实现数据的循环渲染。

以下是使用MatTableDataSource的示例代码:

  1. 首先,导入所需的模块和类:
代码语言:txt
复制
import { MatTableDataSource } from '@angular/material/table';
  1. 在组件中定义数据源和列定义:
代码语言:txt
复制
dataSource: MatTableDataSource<any>;
columnsToDisplay = ['column1', 'column2', 'column3'];
  1. 在组件初始化时,创建数据源并设置数据:
代码语言:txt
复制
ngOnInit() {
  this.dataSource = new MatTableDataSource<any>(yourDataArray);
}
  1. 在模板中使用MatTable组件和数据源:
代码语言:txt
复制
<mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container *ngFor="let column of columnsToDisplay">
    <mat-header-cell *matHeaderCellDef>{{ column }}</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element[column] }}</mat-cell>
  </ng-container>

  <!-- 其他行定义 -->
</mat-table>

在上述示例中,yourDataArray是你的数据数组,columnsToDisplay是你要显示的列的数组。通过使用MatTableDataSource和MatTable组件,我们可以实现类似ngFor指令的功能,并在材质组件中展示数据。

推荐的腾讯云相关产品:腾讯云服务器(CVM)和云数据库MySQL(CDB)。腾讯云服务器提供可扩展的计算能力,适用于部署和运行各种应用程序。云数据库MySQL是一种高性能、可靠的关系型数据库服务,适用于存储和管理结构化数据。

腾讯云服务器产品介绍链接:https://cloud.tencent.com/product/cvm 云数据库MySQL产品介绍链接:https://cloud.tencent.com/product/cdb_mysql

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-结构指令 顶

与其他指令一样,您将结构指令应用于宿主元素。 然后该指令会执行应该对该宿主元素及其后代所做的任何操作。 结构指令很容易识别。 在此示例中,星号(*)在指令属性名称前面。...Angular将它们设置为上下文的index和odd 属性的当前值。 没有指定let-hero的上下文属性的原意是隐含的。...Angular设置let-hero为上下文的$implicit属性的值,NgFor已经用当前迭代的hero初始化了的值。 API指南描述了额外的NgFor指令属性和上下文属性。...NgSwitch本身不是一个结构性指令。 它是一个属性指令,用于控制其他两个switch指令的行为。 这就是为什么你写[ngSwitch],从不写成*ngSwitch。...分组元素可能会破坏模板外观,因为CSS样式既不期望也不适应新布局。例如,假设您有以下段落布局。 I turned the corner <span *ngIf="hero !

16K20

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

首先查看名称是否匹配已知指令的事件属性,如下例所示: <!...如果名称未能匹配已知指令的元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 在事件绑定中,Angular为目标事件设置了一个事件处理程序。...分配给* ngFor的文本是指导迭代器进程的指令。 *ngFor微语法 分配给* ngFor的字符串不是模板表达式。 这是一种微语法 - Angular解释的一种小语言。...大多数,如果不是全部,以前显示的英雄。 你知道这一点,因为每个英雄的ID没有改变。 但是Angular只能看到新的对象引用列表。 别无选择,只能拆除旧的DOM元素并插入所有新的DOM元素。...如果您尝试设置*ngSwitch,则会出现错误,因为NgSwitch是一个属性指令,而不是结构指令。 改变了其同伴指令的行为。 它不直接操作DOM。

29.9K20

ng-content 中隐藏的内容

如果你尝试在 Angular 中编写可重复使用的组件,则可能会接触到内容投射的概念。然后你发现了 ,并找到了一些关于的文章,进而实现了所需的功能。...由于许多问题与Angular 中的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示已被实例化的次数: import { Component } from '@angular/core';...id: number; constructor() { this.id = ++instances; } } 上面示例中我们定义了 Counter 组件,组件类中的 id 属性用于显示本组件被实例化的次数...因为 ng-container 容器不再匹配 select="counter"。为了解决这个问题,我们必须使用 ngProjectAs 属性,它可以应用于任何元素上。...因为 ng-content 只是移动元素,所以可以在编译时完成,而不是在运行时,这大大减少了实际应用程序的工作量。

2.7K30

Angular 显示英雄列表

="let hero of heroes"> *ngFor 是一个 Angular 的复写器(repeater)指令。...它会为列表中的每项数据复写的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...添加 click 事件处理器 把该组件的 hero 属性改名为 selectedHero,但不要为赋值。 因为应用刚刚启动时并没有所选英雄。...但模板中的绑定表达式引用了 selectedHero 的属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。

4.4K70

Angular2 之 结构型指令几个概念

在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化的途径。 Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构。... 注意:这里是出现或者消失,并不是隐藏。 隐藏元素的利弊 当我们隐藏元素时,组件的行为还在继续。 仍然附加子啊它所属于的DOM元素上,仍然在监听事件。...在Angular应用之外,标签的默认CSS属性display是none 。 的内容存在于一个隐藏的文档片段中。...简化了ngIf和ngFor —— 无论是写还是读。 ngIf 接下来这两个ngIf范例的效果完全相同,只是我们写成了另一种风格: <!...ngFor Angular把*ngFor转换成一个类似的形式: <!

3K20

Angular快速学习笔记(3) -- 组件与模板

上面的应用选择内联 HTML ,是因为模板很小,而且没有额外的 HTML 文件显得这个演示简单些。...*ngForAngular 的“迭代”指令。...当通过属性绑定的形式被绑定时,值会“流入”这个属性。 输出属性是一个带有 @Output 装饰器的可观察对象型的属性。 这个属性几乎总是返回 Angular 的EventEmitter。...Angular 管道对像这样的小型转换来说是个明智的选择。 管道是一个简单的函数,接受一个输入值,并返回转换结果。 它们很容易用于模板表达式中,只要使用管道操作符 (|) 就行了。...5.组件样式 Angular 应用使用标准的 CSS 来设置样式。这意味着你可以把关于 CSS 的那些知识和技能直接用于 Angular 程序中,例如:样式表、选择器、规则以及媒体查询等。

15.2K30

AngularDart 4.0 高级-管道 顶

如果您不这样做,Angular会报告错误。 在前面的例子中,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册的。...功率提升计算器 更新模板以测试自定义管道并不是很有趣。 将示例升级到“Power Boost Calculator”,使用ngModel将您的管道和双向数据绑定相结合。...熟悉Angular 1的开发人员将这些知识视为filter和orderBy。 Angular中没有等价物。 这不是一个疏忽。 Angular不提供这样的管道,因为它们表现不佳,并且避免操控性变弱。...--> 您通过文本字符串来识别排序字段,期望管道通过索引引用属性值(如hero...如果这些性能和缩小比例考虑不适用于您,您可以随时创建自己的这种管道(类似于FlyingHeroesPipe)或在社区中找到它们。

6.3K20

Angular 显示英雄列表

="let hero of heroes"> *ngFor 是一个 Angular 的复写器(repeater)指令。...它会为列表中的每项数据复写的宿主元素。 在这个例子中  就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...Angular 会把所点击的  上的 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义的那个。...添加 click 事件处理器 把该组件的 hero 属性改名为 selectedHero,但不要为赋值。 因为应用刚刚启动时并没有所选英雄。...但模板中的绑定表达式引用了 selectedHero 的属性(表达式为 {{selectedHero.name}}),这必然会失败,因为你还没选过英雄呢。 现在,从列表中随便点击一个条目。

4K30

Angular 快速学习笔记(1) -- 官方示例要点

Angular 的复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把标记为一个 HeroService 的注入点 在ngOnInit 中调用service获取数据 a....Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器,专注于路由功能,然后由根模块 AppModule 导入 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...*ngFor 不能直接使用 Observable。 不过,后面还有一个管道字符(|),后面紧跟着一个 async,表示 Angular 的 AsyncPipe。

3.6K00

Angular 快速学习笔记(1) -- 官方示例要点

Angular 的复写器(repeater)指令,使用let xx of xxs遍历 绑定click使用 (click) <li *ngFor="let hero of heroes" (click...声明了一个私有 heroService 属性, 2. 把标记为一个 HeroService 的注入点 在ngOnInit 中调用service获取数据 a....Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器,专注于路由功能,然后由根模块 AppModule 导入 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...*ngFor 不能直接使用 Observable。 不过,后面还有一个管道字符(|),后面紧跟着一个 async,表示 Angular 的 AsyncPipe。

3.7K50

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

该组件具有hero属性,而* ngFor定义了英雄模板变量。 {{hero.name}}中的英雄是指变量输入变量,而不是组件的属性。...幂等性 幂等表达式是理想的,因为没有副作用,并且改善了Angular的变化检测性能。 对Angular来说,一个幂等表达式总是返回完全相同的东西,直到的一个依赖值发生变化。...元素属性(property)可能是更常见的目标,但Angular首先查看名称是否是已知指令的属性(property),如下例所示: [ngClass]...这样的输入映射到指令自己的属性。 如果名称未能匹配已知指令或元素(property)的属性,则Angular会报告“未知指令”错误。 避免副作用 如前所述,模板表达式的评估必须没有可见的副作用。...Angular设置并不再管它。

5.1K10

前端框架与库 - Angular基础:组件、模板、服务

Angular 是一款由 Google 维护的流行前端框架,用于构建动态的 Web 应用。基于 TypeScript,提供了丰富的功能,包括组件化架构、数据绑定、依赖注入等。...'; }}模板Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式,使用插值表达式、属性绑定、事件绑定等语法糖。...插值表达式:{{ expression }},用于显示组件类中的数据。属性绑定:[property]="expression",用于绑定组件类中的属性到元素的属性。...事件绑定:(event)="function()",用于绑定组件类中的方法到元素的事件。服务服务是 Angular用于封装业务逻辑的类,通常用于数据获取、状态管理等。...性能问题undefined过度使用ngFor和ngIf可能导致不必要的渲染。优化这些指令的使用,例如,使用TrackBy函数减少重复渲染。

11610

AngularDart4.0 指南- 表单 顶

创建一个基本的表单 一个Angular表单有两个部分:一个基于HTML的模板和一个组件类,以编程方式处理数据和用户交互。 从课程开始,因为简要地说明了英雄编辑可以做什么。...Name 控件具有HTML5必需属性; Alter Ego 控件什么也不做,因为alterEgo是可选的。 您在底部添加了一个提交按钮,其中有一些类用于样式。...指令的exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令的exportAs属性是“ngForm”。...如果需要,可以将相同类型的错误消息添加到中,但这不是必须的,因为选择框已经将权限限制为有效值。...用于验证和表单元素更改跟踪的NgControl 指令。 输入控件(通过模板引用变量访问)的valid 属性用于检查控件有效性以及显示/隐藏错误消息。

17.5K30

前端框架与库 - Angular基础:组件、模板、服务

Angular 是一款由 Google 维护的流行前端框架,用于构建动态的 Web 应用。基于 TypeScript,提供了丰富的功能,包括组件化架构、数据绑定、依赖注入等。...'; } } 模板 Angular 的模板语言允许你在 HTML 中嵌入 TypeScript 表达式,使用插值表达式、属性绑定、事件绑定等语法糖。...插值表达式:{{ expression }},用于显示组件类中的数据。 属性绑定:[property]="expression",用于绑定组件类中的属性到元素的属性。...事件绑定:(event)="function()",用于绑定组件类中的方法到元素的事件。 服务 服务是 Angular用于封装业务逻辑的类,通常用于数据获取、状态管理等。...性能问题 过度使用ngFor和ngIf可能导致不必要的渲染。优化这些指令的使用,例如,使用TrackBy函数减少重复渲染。 服务注入 忽略服务的注入范围可能导致内存泄漏或全局状态混乱。

9810

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

表示元素及其子元素构成一个主模板。 ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...这些样式仅适用于AppComponent,不影响外部HTML。...添加一个点击处理程序来显示选定的英雄  你不再需要hero属性因为你不再显示一个英雄; 你正在显示一个英雄列表。 但是用户可以通过点击选择一个英雄。...Angular无法显示null selectedHero的属性并抛出以下错误,在浏览器的控制台中可见: EXCEPTION: TypeError: Cannot read property 'name

3K30
领券