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

我在angular 6应用程序中使用了mat-table来显示数据,但结果显示为空格

在Angular 6应用程序中使用mat-table来显示数据,但结果显示为空格的问题可能有多个原因。以下是可能的解决方案:

  1. 数据源问题:首先,确保你的数据源正确且有数据。检查你的数据是否被正确地绑定到mat-table的数据源属性上。你可以在组件中使用console.log()来打印数据源,以确保数据被正确地传递给mat-table。
  2. 列定义问题:检查你的mat-table列定义是否正确。确保每个列都有正确的绑定和显示名称。你可以在mat-table的HTML模板中检查列定义,确保每个列都有正确的matColumnDef和mat-header-cell指令。
  3. 数据绑定问题:确保你的数据正确地绑定到mat-table的每个列上。检查每个列的mat-cell指令,确保它们正确地绑定到数据源中的相应属性。
  4. 样式问题:检查你的mat-table的样式是否正确。确保表格的宽度和高度设置正确,以便正确显示数据。

如果以上解决方案都没有解决问题,可以尝试以下进一步的调试步骤:

  1. 检查浏览器控制台:在浏览器中打开开发者工具,查看控制台中是否有任何错误消息。这些错误消息可能会提供有关问题的更多信息。
  2. 检查网络请求:如果你的数据是从服务器获取的,确保网络请求成功并返回正确的数据。你可以在网络选项卡中查看浏览器开发者工具,检查网络请求的状态和返回的数据。
  3. 检查其他组件:如果你的mat-table位于其他组件中,确保这些组件正确地加载和显示。检查其他组件的模板和代码,确保它们没有影响mat-table的显示。

希望以上解决方案能帮助你解决问题。如果你需要更多帮助,请提供更多详细信息,以便我们能够更准确地帮助你解决问题。

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

相关·内容

Angular React Vue应该选择什么?

根据 bestof.js 提供的数据显示, 2017 年比较 Angular、React、Vue 三剑客 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。...这里是文章的引述: 对于我和我的团队来说,代码的可读性是很重要的,编写代码很有趣也是非常重要的。实现真正简单的计算器小部件时创建 6 个组件并不奇怪。...对于复杂度不大的应用程序,就不必定义的状态流了,像原生 JS 就足够了。 它是如何工作的?组件在任何时间点描述 UI。当数据改变时,框架重新渲染整个 UI 组件 - 显示数据始终是最新的。...用 Vue,你可以用老方法做。这一开始可能会比较容易上手,长此以往会出现问题。 调试方面,React 和 Vue 的黑魔法更少是一个加分项。...但是,调试 Angular 应用程序时,通常需要调试 Angular 的内部理解底层模型。从好的一面来看,从 Angular 4 开始,错误信息应该更清晰,更具信息性。

2.9K20

您应该知道的 Google 搜索技巧

0.前言 大咖好呀,是恋喵大鲤鱼。 Google 搜索是使用最广泛的搜索引擎,没有之一。 我们经常使用 Google 搜索我们想要的信息,但是我们真地会用 Google 吗?...使用减号 - 排除内容 如果您希望搜索结果中不包含某个词汇或短语,那么单词前添加 -,可以多次指定。 注意:减号前面有空格,减号后面无空格,不然无效!...该用法随着社交服务 Google+ 的推出已被弃用。 使用通配符 * 如果您不确定搜索内容中的词汇,可以搜索中使用通配符 *,Google 会用相关的词汇替换通配符。...需要注意的是,谷歌和许多搜索引擎一样,多个词间的逻辑关系默认的是逻辑与(空格)。 那么使用 AND 和空格有什么区别呢? 使用 AND 表示显示指明搜索结果必须要同时包含所有内容,而空格则不一定。...所以 AND 的搜索结果会比使用空格要少一点。 同样的,如果你希望搜索结果包含两个词汇中的任意一个,可以在其中使用 OR 运算符。

62320
  • 8分钟你详解React、Angular、Vue三大框架

    然后,ReactDOM.render方法将我们的Greeter组件渲染在DOM元素(id myReactApp)中。 web浏览器中显示时,结果将是: ?...JavaScript表达式 JavaScript表达式(但不是语句)可以JSX内部通过大括号{}使用。 ? 上面代码的显示结果是: ?...条件语句 If-else语句不能在JSX中使用,但可以使用条件表达式代替。下面的例子当i1时将 { i === 1 ? 'true' : 'false' } 呈现为字符串 'true'。 ?...RxJS限制了状态的可见性和调试,这些问题可以通过像ngReact或ngrx这样的反应式附加组件解决。 支持Angular Universal,可以服务器上运行Angular应用程序。...开源的 "vue-router "包提供了一个API更新应用程序的URL,支持返回按钮,并支持电子邮件密码重置或电子邮件验证链接的认证URL参数。

    22.1K20

    走进AngularJs(二) ng模板中常用指令的使用方式

    也可以标记中使用表达式,如{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。框架内部,字符串不会简单的使用eval()执行,而是有一个专门的$parse服务来处理。...如此一,把事件的绑定又变回了内联的,岂不是历史的倒退。也一样对此表示不解,因为不写onclick已经很多年。。。...顺着这个思路再多想一点,我们模板中使用{{}}显示数据时,ng编译完成之前页面上岂不是会显示出大括号及里面的表达式?确实是这样。...为了避免这个,ng中有一个与{{}}等同的指令:ng-bind,同样用于单向绑定,页面刚加载的时候就不会显示出对用户无用的数据了。...~写这篇文章之前就在纠结,写这样的内容是不是有点多余,因为这些东西angular官网(http://docs.angularjs.org/api/)一看就明白,而且在线示例也写的很棒。

    2.9K20

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    这会产生更多问题:谁将负责显示卡?...AppComponent将在应用程序中的其他任何内容之前加载,因此我们必须认为它是整洁而小巧的。我们最好再创建一个组件来照顾存储卡片列表并将其显示我们的页面上。...这里有一个有趣的小技巧:Angular中,双向数据绑定已经不再适合我们了。这并不意味着我们失去了访问这种行为的机会。...反应角 - Ngrx 让我们谈谈我们的应用程序状态,的意思是我们的应用程序的所有属性,它们的字面定义其当前的行为和状态。...我们还使用Gulp压缩我们的工件,因为Angular CLI 不再为我们做。觉得很奇怪,好吧,让我们添加Gulp和压缩脚本。

    42.6K10

    angularjs中常用的ng指令介绍【转载】

    也可以标记中使用表达式,如{{1+2}},或者与过滤器一起使用{{1+2 | currency}}。框架内部,字符串不会简单的使用eval()执行,而是有一个专门的$parse服务来处理。...中指定style的值: 注意用了class而不是ng-class,这是不可以对换的,官方的文档也未做说明,姑且认为这是ng的语法规则吧。...如此一,把事件的绑定又变回了内联的,岂不是历史的倒退。也一样对此表示不解,因为不写onclick已经很多年。。。...顺着这个思路再多想一点,我们模板中使用{{}}显示数据时,ng编译完成之前页面上岂不是会显示出大括号及里面的表达式?确实是这样。...为了避免这个,ng中有一个与{{}}等同的指令:ng-bind,同样用于单向绑定,页面刚加载的时候就不会显示出对用户无用的数据了。

    1.9K30

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识的大多数小伙伴都是后端的同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结...ng-if判断使用: //angular中没有else只能都通过ng-if判断 准备中 进行中...ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template...ng-class-odd 类似 ng-class,奇数行起作用 ng-click 定义元素被点击时的行为 ng-cloak 应用正要加载时防止其闪烁 ng-controller 定义应用的控制器对象...HTML 元素 ng-href the 元素指定链接 ng-if 如果条件 false 移除 HTML 元素 ng-include 应用中包含 HTML 文件 ng-init 定义应用的初始化值

    5.3K41

    AngularDart4.0 英雄之旅-教程-06服务 顶

    你开始的地方 继续英雄之旅之前,请确认您具有以下结构。 如果没有,请返回前面的页面。 ? 如果该应用程序尚未运行,请启动该应用程序进行更改时,请通过重新加载浏览器窗口保持运行。...您可能会试图构造函数中调用getHeroes()方法,构造函数不应包含复杂的逻辑,特别是调用服务器的构造函数(如数据访问方法)。 构造函数用于简单的初始化,如将构造函数参数连接到属性。...使用Future,您可以注册回调函数,计算完成时(结果准备就绪),或需要报告计算错误时调用。 这是一个简单的解释。...处理Future 由于对HeroService的更改,应用程序组件的英雄属性现在是Future,而不是英雄列表。 您必须更改实现以完成时处理Future结果。...AppComponent激活时,您使用ngOnInit生命周期挂钩获取英雄数据。 您将HeroService定义AppComponent的提供者。

    2.9K10

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core的更新内容

    Razor组件应用程序中,使用@addTagHelper指令从Razor类库导入所有组件,然后应用程序中使用component1 Index.razor 1: @page "/" 2...使用数据注释启用验证支持需要显式调用,但我们正在考虑将其作为默认行为,随后你可以覆盖它。...Angular模块所构建的身份验证和授权支持,可以导入到您的应用程序中,并提供一套组件和服务增强主应用程序模块的功能。...运行结果如下: ? 当我们打开应用程序时,我们会看到常用的Home、Counter和Fetch数据菜单选项以及两个新选项:Register和Login。...注册新用户后,我们将被重定向回应用程序,在那里我们可以看到我们成功地通过了身份验证。 ? 调用经过身份验证的API 如果我们点击获取数据,我们可以看到天气预报数据列表 ?

    22.7K10

    2017年前端框架、类库、工具大比拼

    它要求以特定的方式进行软件设计,某些节点上实现自己的逻辑。框架通常提供了事件、存储和数据绑定等功能。 框架通常提供了比类库更高层次的抽象,帮助快速构建项目的前80%。...虽然两个类库客户端使用率很低,但是却可以服务器端的Node.js应用程序中使用这两个类库。...统计显示React的使用度似乎很低,因为它是应用程序中使用而不是在网站。...优点: 客户端应用程序提供了单一解决方案 开发人员可以立刻提高开发效率 - 它使用jQuery 良好的向后兼容性和升级选项 采用了现代Web开发标准 缺点: 大型分配式 与其它正在向较小组件结构发展的框架相比...优点: 小而轻便,无依赖 优秀的浏览器支持,可以支持到IE6 良好的文档资源 缺点: 较大的项目可能变得很复杂 发展已经放缓 使用情况似乎减弱 更多的框架和类库 以下项目虽然不是特别流行,值得考虑:

    2.3K10

    angular面试题及答案_angular面试

    父子组件之间的数据传递 @Input 父组件向子组件传递数据和传递方法(子组件中使用) @output 子组件传值给父组件 (事件传递的方式)(子组件中使用) //子组件中使用事件发射器 @output...Constructor 和 ngOnInit 的本质区别 Constructor ES6中 constructor表示构造函数,使用在class中。初始化操作。...ngOnInit : angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...如何优化Angular 2应用程序获得更好的性能? 1)考虑AOT编译。 2)确保应用程序已经经过了捆绑,uglify和tree shaking。...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务器的通讯非常便利。

    11.1K120

    前端开发:这10个Chrome扩展你不得不知

    如果您是Angular开发人员,并且没有您的DevTool中使用过Augury,那么这是件很可惜的事情。Augury有着您直接从浏览器调试Angular应用程序所需的一切,来试试吧。 3....您可以检查React组件的属性和状态,随意更改属性和状态,并查看所作的变化组件树中的传递过程。 4. JSONView ? 浏览器通常不太擅长显示JSON数据。...数据通常以纯黑白的方式密集显示,这使得理解它非常困难,特别是您试图定位一个深度嵌套的属性时。 JSONView格式化和美化JSON数据。...它以丰富着色的树状视图显示它们,使得标识属性和值变得更加容易。 5. Library Sniffer 通常很想知道网页是基于什么框架构建的,或这个站点引用了什么库。...6. Web Developer ? Web Developer会将工具栏添加到您的浏览器中。这个工具栏包含许多方便的工具,程序员和设计人员都可以日常工作中使用它们,从而提高工作效率。

    2.4K10

    Angular8稳定版修改概述

    下面是对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本。 新功能 差分加载 根据您的browserlist 文件,构建期间,Angular将为其创建单独的包polyfills。...这是如何工作的? 基本上,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。...Ivy渲染引擎实验 虽然早在angular 6的时候就提出了Ivy,但是Ivy仍处于试验阶段,通过Angular 8版本,您可以通过创建一个enable-ivy标志设置true 的应用程序测试它,如下所示...较小的捆绑尺寸(V9)(如果您错过了I / O 19,Vikram Subramanian显示了一个4.3 KB版本的应用程序)。 向后兼容性。...Bazel将提供以下优势: 更快的构建时间(对于第一次构建需要时间,并发构建将更快),Angular已经使用它,现在CI7.5分钟内完成,而不是Bazel之前的60分钟。

    4.5K20

    Angular 6+依赖注入使用指南:providedIn与providers对比

    本文由达观数据研究院根据《Total Guide To Angular 6+ Dependency Injection — providedIn vs providers》编译,如有不当,还请指正。...Angular 6我们提供了更好的语法——provideIn,用于将服务注册到Angular依赖注入机制中。...于是,需要再实例一个HttpClient:const httpClient = new HttpClient(httpHandler);httpHandler又从哪来?...使用新语法进行依赖注入 随着Angular 6的出现,我们可以使用全新的语法我们的应用程序中建立依赖项, 官方名称是“Tree-shakable providers”,我们通过使用 @Injectable...从技术上讲,'root'代表 AppModule ,Angular足够聪明,如果该服务只是惰性组件/服务中注入,那么它只会绑定在延迟加载的bundle中。

    2.8K11

    如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

    Generating code 如果您对当前WijmoJS可视化在线Web设计器的设计效果感到满意,则可以生成应用程序中使用的代码。...从设计图面删除所有控件,然后“工具箱”中展开图表组,并单击名为FlexChart的项目。 请注意,该图表显示代表“最活跃”证券的实时样本数据。...请注意,它具有latestPrice的绑定值,对应于数据源中的实际字段名称。 name属性(图表图例中显示)具有适当的大小写和单词之间的空格。...wijmo.chart.analytics.TrendLine({ binding: "latestPrice", fitType: "Logarithmic", visibility: "Plot" })); 提供了默认的系列名称和绑定,以便您可以了解应用程序中使用实际数据进行部署时实际图表的外观...您可以使用自己的绑定替换默认系列以生成代码,设计人员不会绘制任何数据点。

    5.9K20

    AngularDart4.0 英雄之旅-教程-03英雄编辑器

    ', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular插值绑定语法。 这些插值绑定将组件的标题和英雄属性值作为字符串显示HTML标题标签内。...显示数据”页面中阅读有关插值的更多信息。 Hero对象 英雄需要更多的属性。 将英雄从文字字符串转换为类。 创建一个具有id和name属性的Hero类。...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModel是angular_forms库中定义的有效Angular指令,默认情况下不可用。...模板中使用任何Angular指令之前,需要在组件的@Component注解的指令参数中列出它们。...你走过的路 保留你已构建的代码 “Tour of Heroes”应用程序使用双重大括号插值(一种单向数据绑定)显示Hero对象的应用程序标题和属性。

    3.2K10

    Angular Provider 作用域

    Angular 6 之后,我们也可以利用 @Injectable 的元数据配置服务类,如: import { Injectable } from '@angular/core'; @Injectable...当你注册根级别的服务时,Angular 会创建一个单独的共享服务实例。如果在 @Injectable 元数据中注册服务,Angular 会在构建阶段自动剔除无用的服务,进而优化我们的应用程序。...因此当我们在跟模块中配置某个服务后,这个服务将在整个应用程序中可用。需要注意的是非懒加载的特性模块中,如果我们也注册了同一个服务。根模块和特性模块中是使用同一个服务实例,即服务是单例的。...以上代码成功运行后,页面的显示结果如下: ? 当点击 “改名” 按钮之后,你会发现名字从 semlinker 变化成 lolo。这表示这两个模块之间是共享同一个 UserService 实例。...当在懒加载的模块中使用模块外的服务时,它将使用根注入器创建的服务实例。如果已经懒加载模块中注册了 provider,模块内获取对应的服务时,它将从模块的子注入器中获取对应的服务实例。

    1.8K20

    「前端架构」React和Vue -CTO的选择正确框架的指南

    React的静态类型检查 React确实利用了JavaScript ES6基础作为代码语法,但是它是否支持编译时的类型检查之类的功能呢? 嗯,是的!...Vue还利用Javascript ES6语法编写代码。...React中测试和调试 测试:Facebook推荐Jest测试React代码。下面是Jest和Mocha 的比较——还有一篇文章是关于如何在Mocha 中使用Enzyme 的。...还有一个框架可以用来创建一个React SSR应用程序,叫做Next.js。因此,React启用了SSR,没有官方支持,并且使用了额外的第三方包。...曾经有一个客户React编写了一个自定义类模块的特性,浏览他们的代码非常愉快。 也就是说,React仍然可以用于构建可伸缩的web应用程序只有在从一开始就考虑可伸缩性时才会考虑。

    4.3K20
    领券