角度材质步进器未正确显示

2023-12-05

这是我的 Angular Material 步进器的 HTML 代码:

<mat-horizontal-stepper class="stepper">
    <mat-step label="Basic" state="cloud_download">
      Step 1
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Pixels" state="settings">
      <p>Step 2</p>
      <button mat-button matStepperPrevious>Previous</button>
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Creative" state="settings">
      <p>Step 3</p>
      <button mat-button matStepperPrevious>Previous</button>
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Targeting" state="settings">
      <p>Step 4</p>
      <button mat-button matStepperPrevious>Previous</button>
      <button mat-button matStepperNext>Next</button>
    </mat-step>
    <mat-step label="Review" state="settings">
      <p>Step 5</p>
      <button mat-button matStepperPrevious>Previous</button>
    </mat-step>
  </mat-horizontal-stepper>

这就是我将其导入到我的通用导入文件中的方式。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/*  Added */
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatStepperModule} from '@angular/material/stepper';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
/* */


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    MatCheckboxModule,
    MatStepperModule
  ],
  exports:[
    CommonModule,
    MatToolbarModule,
    MatIconModule,
    MatCheckboxModule,
    MatStepperModule
  ],
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }]
})
export class CommonImportsModule { }

但是步进器没有显示出它应该显示的内容。它只是显示如下直线:

1_______2________3。

我正在使用 Angular 9,问题是什么我还安装了 Angular Material,并且 Angular Material 中的其他东西运行良好。


您似乎缺少材质主题的 css 导入,请参阅:

https://material.angular.io/guide/theming#using-a-pre-built-theme

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

角度材质步进器未正确显示 的相关文章

  • Angular cli - 在“deployUrl”选项被弃用后在 webpack 中设置“publicPath”

    我希望在这里得到更多答案 开放问题角度 cli https github com angular angular cli issues 22113以及 从角度 13 开始 它说deployUrl正在被弃用 在我们的项目中 我们定义deplo
  • Material 2.0.0-beta.3 md-slider不拖动

    希望这是一个愚蠢的问题 我刚刚在为雇主构建的项目中添加了一个 md slider 因此我没有代码来表示抱歉 我将 MdSliderModule 导入到我正在使用的模块中 在我的模板中我想要的位置添加了标签 它出现了 看起来很棒 但不会拖沓
  • 如何在 Angular2 中实现间隔/轮询以与量角器一起使用?

    我有一个 angular2 应用程序 我想用量角器进行测试 在此应用程序中 我有一个带有图表的页面 该页面正在使用自动生成的数据定期更新 显然 Protractor 的一项功能是在执行测试代码之前等待脚本和 http 调用完成 但是 如果有
  • Angular 4:如何使用 HTTPClient 读取文本文件的内容

    我的 Angular 4 项目目录中有一个 txt 文件 我想读取其内容 怎么做 下面是我使用的代码 该文件位于 app 文件夹内的 files 文件夹中 我拥有 HTTPClient 代码的组件位于 app 文件夹内的 httpclien
  • 找不到模块“@angular/platform-b​​rowser/animations”

    我收到错误 ts 找不到模块 angular platform b rowser animations 我已经安装了以下内容 npm install save Angular Material Angular cdk npm install
  • mat-table 中每行的 formGroup 数组

    我有一个 formGroup 数组 其中每个元素代表一个表单 接下来我有一个 mat 表 我想要做的是将每个 tr 即每一行 生成为不同的表单 以便表的第 i 行链接到第 i 个 formGroup 因此 在第 i 行内 每个 td 元素都
  • 使用 Angular 4 将新行添加到 mat-table 中

    如何从输入字段手动将新行添加到 Angular Material 表中 请看这张图片 如果我添加状态名称和状态代码 它应该出现在下表中 请帮助我如何使用 Angular 4 来实现它 我整理了一个简单的示例 应该可以很好地提示您从哪里开始
  • 测试 - 存根服务方法未定义

    我已经在非常简单的代码上编写了一个非常简单的测试 但由于某种原因存根服务方法未定义 当我使用 Jasmine Spy 时 它可以工作 但对于这样一个简单的任务 有人可以解释一下为什么会发生这种情况吗 我删除了 import 语句只是为了减少
  • 在请求标头中设置 Cookie Angular2

    我是 angular2 的新手 我的服务器 spring 在其响应标头中使用 set cookie 值来响应身份验证 如何将该 cookie 设置为下一次 API 调用的请求标头 我搜索了很多 但找不到合适的解决方案 作为http get
  • http.put 请求在 Angular2 中执行两次

    我正在尝试更新从我的 Angular2 应用程序调用 API 的公司记录 我在调试时注意到 http 调用被执行了两次 我找到了另一个堆栈溢出线程 https stackoverflow com questions 37241294 ang
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • 如何在 Angular 2 应用程序中从 TypeScript/JavaScript 中的字符串获取类?

    在我的应用程序中 我有这样的内容 user ts export class User 现在 我这样做 应用程序组件 ts callAnotherFunction User 如果我将类名作为字符串 即 我该如何做到这一点 User 如果可能的
  • 如何在 TypeScript 中禁用/抑制库中的错误?

    我打开了一些编译器开关来报告代码中的更多问题 例如严格的空检查 但我在使用的库中遇到了数十个错误 例如 default xxx node modules angular core src util decorators d ts 11 5
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • Angular2 与 Jquery-ui 滑块

    我尝试将 Jquery ui 滑块与 angular2 一起使用 我想让变量 slideValue 显示滑块的值 但我不知道如何将我的模型或变量从角度绑定到滑块 这是我的滑块组件 import Component ElementRef In
  • 如何使用 Angular 2 动画实现翻转效果?

    我一直在我的项目中使用纯CSS翻转卡片 但这个解决方案不是合适的 有人可以通过点击按钮来呈现角度 2 的翻转吗 我在 angularjs 中找到了一个https codepen io Zbeyer pen oXQrZg https code
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 在停止调试时终止 VS Code 中的 ng 服务任务

    我有一个 Angular 项目 目前正在通过 chrome 调试器在 vs code 内进行调试 我的launch json uses preLaunchTask serve 其中服务定义于tasks json as ng serve 这样
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段

随机推荐

  • 格式化 Emacs 函数中的标头以将缓冲区打印到 PDF(带换行)

    Rupert Swarbrick 提出了以下三个函数来将 Emacs 缓冲区打印为 pdf 其中行被换行 使用时通常不会出现这种情况 ps print 功能 问题是这个函数要实现换行 必须复制当前缓冲区 这有效地破坏了ps print bu
  • 使用C将exec进程发送到后台?

    我的问题听起来与此相同 但事实并非如此 在Linux中用C在后台启动一个进程 我知道如何执行 fork 但不知道如何将进程发送到后台 我的程序应该像一个简单的命令 unix shell 一样工作 支持管道和后台进程 我可以做管道和叉子 但我
  • Selenium WebDriver 获取文本

    我有一个 div 0 div 我尝试编写 myDiv 的测试0其中的文字 使用 WebDriver 是 String text webDriver findElement By xpath div name myDiv getText 但在
  • 通过单点登录进行身份验证后移至 Facebook 应用程序页面

    我正在开发一个应用程序 需要集成 Facebook 的社交功能 我想要的是使用 SSO 单点登录 功能 当用户按下我的应用程序中的按钮时 网络视图将打开并向他显示我在 Facebook 中的应用程序页面 在用户进行身份验证后 现在他可以像其
  • React WebApp 调用 NestJS 后端中使用 PassportStrategy 的 Google 登录无法正常工作

    我已经在 NestJS 后端中使用 PassportStrategy 实现了 Google 登录 NestJS 后端开发基于此指南 https medium com nielsmeima auth in nest js and angula
  • 类中ShouldSerialize()的重构...我可以使用IContractResolver吗?

    我有一个返回大量汽车功能的 API 全部都是布尔值或整数 基本上我只想显示返回真值或整数 gt 0 的 API 我正在使用 JSON net 因此我可以使用 ShouldSerialize 属性来确定是否应该根据属性的值序列化该属性 我的代
  • Django cookie 没有保存在浏览器上

    我正在使用 React 和 Django 制作一个应用程序 当我使用 django 登录时 我在 cookie 中设置了令牌 但浏览器中未设置 Django 响应 cookie 我试图努力调试它但不能 不知道我哪里做错了 Request U
  • 如何在 jQuery UI Slider 设置 3 种不同的颜色

    我正在用这个用户界面滑块 我必须用 3 种不同的颜色来制作这个滑块 手柄颜色 句柄的前一部分 句柄的下一部分 Something like this 到目前为止 我只能设置手柄颜色 但是 如何设置另外两种不同的颜色 一个用于手柄的前一部分
  • 循环多维数组并删除某些键

    我有一个基于下面数组的嵌套树结构 Array 1 gt Array id gt 1 parent gt 0 name gt Startpage uri gt 125 basename gt index php child gt 23 gt
  • 使用外部库将 Jar 转换为 exe

    我一直在尝试将 jar 转换为 exe 该程序 jar 使用蓝牙库 Bluecove 它是某个目录中的另一个 jar 该程序还使用 Java Swing 通常JFrame和东西 当从 Netbeans 或 Eclipse 中运行时 该程序可
  • TypeScript 类型排除泛型参数为“any”的类型

    这是一个分支React FunctionComponent 的 TypeScript 类型恰好返回一个 IntrinsicElement React 定义 declare namespace JSX type Element React R
  • 打字稿显示错误“对象可能是‘未定义’”

    我定义了一个由接口注释的多种费用的对象 该接口包括索引签名 只读属性和可选属性 当我声明计算总费用的函数时 TypeScript 警告我该对象可能未定义 因为我知道可选属性可以是未定义的 所以我使用类型保护来检查循环中每个属性的值是否不是未
  • 通过将新行插入(添加)到 SQL Server 数据库表中来触发 Azure Function

    是否可以通过将新行插入表 使用 SQL Server 数据库 来触发 Azure 函数 或者 是否可以创建逻辑应用程序来通知我们 如果新记录已添加到表 SQL Server 数据库中 例如 一旦添加新记录即可发送新信息电子邮件 您可以使用A
  • 用于解析 google 搜索结果的 Chrome 扩展

    我正在尝试制作一个小扩展来检查维基百科文章的谷歌搜索结果 并在之后添加一些额外的链接 但我在解析搜索结果时遇到了一些麻烦 目前来说非常简单 显现 name Test version 0 1 description Test Test ico
  • 在 MDM 中更新 iOS 设备中安装的配置文件

    我想将配置有效负载发送到设备 例如 我想向特定设备发送限制负载 禁止 safari 即我想更新设备上安装的配置文件 我是否需要以与发送查询有效负载相同的方式发送此配置文件有效负载 我是否需要包含设备上存在的配置文件的所有配置负载 或者只需发
  • 使用 Jmeter xpath 提取器获取 oauth 令牌并在其他 Http 请求的路径中使用它

    如果我想提取访问令牌的值 那么正则表达式应该是什么 以便我可以在其他 Http 请求的路径中使用它 例如下面 http 响应中的 access token 93ee29b4 74dc 4uu7 8e10 6eac6845511b acces
  • 使用 Intel HD 4000 在 Mac 上进行 Cuda 编程 [已关闭]

    Closed 这个问题是无关 目前不接受答案 我需要做什么才能在配备 Intel HD 4000 显卡的 Macbook Air 上进行 Cuda 编程 设置虚拟机 购买外置 Nvidia 卡吗 有可能吗 如果您有一台新的 Macbook
  • IISnode - 使节点进程始终工作

    我正在使用 IIS7 5 和 iisnode 在 Windows 服务器上运行 nodeJS REST api 我注意到节点进程并不总是在后台活动 因此有时响应由于加载而需要更多时间 因为它需要创建所有连接和其他内容来获取响应数据 我在默认
  • 使用 Angular Universal 更新 SEO 的元标记

    我正在构建一个 Angular Universal Angular 2 网站 我想添加社交媒体分享按钮 我实现了服务器端渲染 并且还使用以下代码更新了必要的元标记 constructor private dataService DataSe
  • 角度材质步进器未正确显示

    这是我的 Angular Material 步进器的 HTML 代码