angular5 相关问题

Angular 5 组件测试选择和触发事件

我有一个带有下拉菜单的组件。 更改后，它会触发一个事件，该事件会根据事件值过滤数组以从数组中获取 selectedProduct。 我的代码如下：...

与 <mat-icon>（角度材质）一起使用时我们可以更改 svgicon 颜色吗

所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。 这是供参考的代码： 所以我有一个 svg 图标，我使用有角度的材料来显示它，并想更改悬停时的颜色，但到目前为止我还无法做到这一点。 以下是参考代码： <mat-icon svgIcon="menu"></mat-icon> 但是当我尝试时，图标出现了， <mat-icon class="color" svgIcon="menu"></mat-icon> 以及CSS部分 .color:hover, .color:active{ color: black; fill: black; } 这不起作用。 任何帮助将不胜感激，谢谢。 今天早上我自己解决了这个问题，我所做的基本上是用文本编辑器打开 svg 文件，并且在长“Path”属性的末尾有一个填充属性，我只是删除了该部分，现在它工作得很棒。 示例（之前）：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866" fill="#ffffff";/>` 之后：- <path d="M47.713,274.096c0,3.866,3.134,7,7,7s7-3.134,7-7v-64.653l87.584-`66.53v52.38c0,3.866"/> 现在一切正常，悬停也正常...非常感谢您仍在研究它。 SVG 图标默认为黑色，除非另有说明，您发布的代码似乎有效，尝试将鼠标悬停时的颜色属性更改为 red 并查看是否可以看到更改。 将 SVG 的填充变量写入 currentColor，如下所示： <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> 之后你可以像这样改变颜色：<mat-icon svgIcon="hero" style="color: red;" />

Angular 5模板表单检测表单有效性状态的变化

为了让组件能够侦听其包含的表单的有效性状态的变化并执行某些组件的方法，响应式表单是一种可行的方法吗？ 很容易禁用...

Angular 5 延迟加载与动态加载

有人可以解释一下 Angular 5 中延迟加载模块和动态组件加载之间的区别吗？我很难弄清楚何时使用什么。您能为每个...提供一个用例吗？

使材质表列的内容动态宽度

经过大量修改，我终于为我的材质表有了一个不错的设置。 它有分页，有排序，有我需要的所有东西。 然而，它看起来不太好，因为我的几个colu...

Angular5 - 动态设置 div 容器的颜色

使用 AngularJS 效果很好： 但 Angular5 则不然。如何用 Angular5 做到这一点？

自定义密码匹配验证器在 angular5 中不起作用

我正在实现自定义验证器来匹配组件中的密码。 这是我的 component.ts 表单声明 this.addUserForm = 新的 FormGroup({ 名字：new FormControl('', [Validators.req...

Angular 5：从 URL 获取主机名和应用程序名称

我当前的网址是： https://localhost:8080/MyApp/manager/dashboard 在上面的 url 中，我只想获取 https://localhost:8080/MyApp/ 部分。 有没有什么方法可以在不进行硬编码的情况下获取它

“mat-toolbar”不是已知元素 - Angular 5

我创建了一个新项目，我正在尝试添加角度材料。 我在我的应用程序文件夹中创建了material.module.ts： 从“@angular/core”导入{NgModule}； 进口 { MatButton 模块，...

为什么我应该在 Typescript / Angular 中使用接口（模型）？

在我看来，用模型定义对象似乎使它们变得僵化且不易更改，从而更容易在将来破坏应用程序并添加代码行而没有任何好处。对于...

如何在Angular 5中获取计算机和浏览器的设备ID？

我正在使用 Angular 5 开发 WEB 银行应用程序。任务是我想找出计算机的设备 ID 和浏览器名称。 我尝试了这个 NPM 模块： npm 安装 ngx-device- detector --save 导入 { NG...

在 Angular 6 中如何使 url 模式不区分大小写？

就我而言，我想以不区分大小写的方式支持相同的网址。 示例：它应该支持所有 url 本地主机:1029/文档 本地主机:1029/文档 本地主机:1029/文档 本地主机：

Angular 5 基于角色的路由

我有一个网站，其主页在我的路由模块中定义为： const appRoutes: 路由 = [ { 小路： ''， 组件：HomeComponent }]; 现在我想为管理员显示不同的主页

指定的日期值不符合Angular 5要求的格式

在我的 Angular 应用程序中，我在输入字段中显示从 API 到组件的数据。 所有字段都已填充，但日期类型的输入元素未填充 下面是 html 标记 在我的 Angular 应用程序中，我在输入字段中显示从 API 到组件的数据。 所有字段都已填充，但日期类型的输入元素未填充 下面是 html 标记 <input [(ngModel)]="CustomerVM.customer.CustomerDob" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)"> 控制台显示 指定的值“2018-09-21T00:00:00”不符合要求的格式“yyyy-MM-dd”。 我制作了一个通用函数，将服务中的日期格式设置为 FormatDate(iDate: Date) { var inputDate:Date= new Date(iDate); var formattedDate = new Date(inputDate.getUTCDate(), (inputDate.getUTCMonth() + 1), inputDate.getUTCFullYear()); return formattedDate; } 和 this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(this.CustomerVM.customer.CustomerDob); 但它在日期字段中不显示值 在插值块内，我们可以使用管道格式化值 {{DOB | date:'mediumDate'}} 我们也可以用 ngModel 来做这个吗？因为我不需要格式化它的方法。 我怎样才能实现这个目标？ 动作表达式不能包含管道。您可以通过将 [(ngModel)] 提供的双向绑定分为属性绑定和事件绑定来实现更复杂的绑定。然后可以将日期管道包含在属性绑定表达式中： <input [ngModel]="item.value | date:'yyyy-MM-dd'" (ngModelChange)="item.value=$event" type="data" /> 示例中的 input 标签需要如下所示的内容： <input [ngModel]="CustomerVM.customer.CustomerDob | date:'yyyy-MM-dd'" (ngModelChange)="CustomerVM.customer.CustomerDob=$event" type="date" name="MemberDateOfBirth" class="form-control" (blur)="Calculate_Age(CustomerVM.customer.CustomerDob)"> 你的服务应该是这样的： FormatDate(iDate: Date) { var inputDate = new Date(iDate); var formattedDate = inputDate.getFullYear()+'-'+(inputDate.getMonth() + 1)+'-'+ inputDate.getDate(); return formattedDate; } 在你的 ts 文件中应该有这样的： let newDate = new Date(this.CustomerVM.customer.CustomerDob); this.CustomerVM.customer.CustomerDob = this.Helper.FormatDate(newDate); 日期的响应是时间戳格式。时间戳值未填充您的日期字段，因此您需要将时间戳格式转换为日期格式。 var datePipe = new DatePipe("en-US"); let formatedyear = datePipe.transform(this.CustomerVM.customer.CustomerDob, 'MM/dd/yyyy'); this.CustomerVM.customer.CustomerDob = formatedyear; 然后从 '@angular/common' 导入 { DatePipe } ；在你的组件中 使用 ngValue 正如我在他们的文档中看到的那样，如果你想使用 Angular datepicker，你需要： 修复 从输入中删除 type="date" 说明 HTML5 的格式为 yyyy-MM-dd，而 Angular 的格式为 dd-MM-yyyy。

如何在 Angular 5 中路由到外部链接

这可能是一个愚蠢的问题，但我是 Angular 的新手，还没有得到答案。 我正在遵循一个教程，并为我的 Angular 5 项目设置了这样的路线： 导入{NgMo...

mat-slide-toggle 不应更改其状态

当我检查滑动开关时，它应该按预期工作。但是当我尝试取消选中它时，会出现一个确认窗口，询问您是否确定。当我在确认窗口中单击“取消”时，仍然...

如何使用角度材料在工具提示中选择选定的值

我正在使用角度材料垫选择显示一个下拉菜单。我想使用材质工具提示显示选定的元素。 我正在使用角度材料垫选择显示一个下拉菜单。我想使用材质工具提示显示选定的元素。 <mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}} (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> </mat-form-field> 但是它显示了[对象对象] 这里是emp的内容 emp[ {"id":0101,"name":"damshad"}, {"id":0102,"name":"ranjan"}, {"id":0103,"name":"himanshu"}, {"id":0104,"name":"gourge"}, {"id":0105,"name":"taffic"}, {"id":0106,"name":"ajir"}, {"id":0107,"name":"mallom"} ] 请帮忙 您错过了{{}}关闭大括号。 我已经在 stackblitz 上创建了演示 HTML代码 <mat-select [(ngModel)]="selected" matTooltip="{{getToolTipDEata(selected)}}" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> ts代码 selected=null; emp=[{ name:'emp 1' },{ name:'emp 2' }] getToolTipDEata(data){ if(data && data.length){ let msg=""; data.forEach(res=>{ msg+=res.name + " "; }) return msg; }else{ return "please select employee"; } } 如果您只想获取工具提示中的垫子选择“触发器”上显示的内容，请使用 triggerValue: <mat-select #matSelect [matTooltip]="matSelect.triggerValue"> </mat-select> 适用于 ngModel、反应式表单和多项选择 您可以简单地将 ngModel 传递给 Tooltip，也可以使用 matTooltipPosition 更改位置。 <mat-select [(ngModel)]="emp" matTooltip="{{emp}}" matTooltipPosition="above|below|left|right" > <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> 原代码 <mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{selected}} (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> </mat-form-field> 我的代码 <mat-select [(ngModel)]="emp" [(value)]="selected" matTooltip="{{toppings.value.name}} (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> </mat-form-field> 要根据所选值显示工具提示，您必须为 mat-select 元素定义 id，然后您可以引用其“selected”属性 <mat-select #testid [matTooltip]="testid .selected?.viewValue" (openedChange)="oChange($event)" placeholder="Employee" [formControl]="toppings" multiple> <mat-option *ngFor="let p of emp" [value]="p" >{{p.name}}</mat-option> </mat-select> 我想你错过了 } matTooltip="{{selected}

在 Angular 5 中安排任务

如何在 Angular 5 中插入事件日历？ 经过大量研究，我找到了 FullCalendar，但在实施我的 Angular 项目 5 时遇到了很多问题。 有谁知道类似的东西...

（类型错误：无法在 HttpHeaders.applyUpdate 中读取 null 的属性“长度”）Angular 5，Http 客户端

我在服务中发出 http 请求时收到此响应。 这是登录组件 导出类 LoginComponent { 凭证：凭证； 构造函数（ 私人身份验证：AuthServic...

Angular Service Worker - 无法加载资源：服务器响应状态为 504（网关超时）

我在 Angular 5.2.5 应用程序中使用 Angular-CLI 1.6.6 和 @angular/service-worker 5.2.5。除了一个错误之外，本地精简版服务器以及生产服务器上的一切都运行良好