我正在使用 Angular 材料,但面临以下问题。

此处的示例中,您可以使用以下代码更改背景:

<mat-tab-group [backgroundColor]="backgroundColorToggle.value">

但对我来说,它没有用。 顺便说一句,我没有使用变量,而只是一个字符串:

<mat-tab-group [backgroundColor]="primary">

最后,我尝试了以下方法并且奏效了:

<mat-tab-group backgroundColor="primary">

在我自己的组件中,作为输入参数( @Input() )我可以同时使用: <app-my-component [input]=..><app-my-component input=..>

那么[input]="value"input="value"之间的区别是什么,为什么在我的组件中既可以工作,又可以在 Angular 材料中无效。

#1楼 票数:2 已采纳

backgroundColor是一个需要字符串的输入属性。 Square Bracket 需要一个属性。

因此,语法将是:

<mat-tab-group [backgroundColor]="'primary'">

或者,

<mat-tab-group backgroundColor="primary">

或者,

.ts

primary = 'primary';

.html

<mat-tab-group [backgroundColor]="primary">

#2楼 票数:1

使用方括号将属性绑定到组件中的公共属性。

此示例将尝试在您的组件中应用primary属性的值:

组件.html

<mat-tab-group [backgroundColor]="primary">
</mat-tab-group>

组件.ts

primary: string = 'red';

而在没有方括号的情况下执行相同操作将属性设置为 HTML 中的文字值。

<mat-tab-group backgroundColor="red">
</mat-tab-group>

这两个例子是等价的

#3楼 票数:1

方括号暗示绑定,而省略它们会进行属性分配(还有更多内容,我将在后面介绍)。 如果您要进行绑定,则引号中的值必须是 JavaScript 表达式。

这一行:

<mat-tab-group backgroundColor="primary">

简单地将值“primary”分配给属性backgroundColor 如果值“primary”不存在,则取决于组件如何处理它。

这一行:

<mat-tab-group [backgroundColor]="primary">

是对名为primary的字段的绑定。 这意味着为了分配属性值,Angular 将查找名为primary的字段,读取其值并进行分配。 如果名为primary的字段不存在,它将分配一个值undefined 例如,如果你有这个:

primary = 'red';

然后第二个语句(带绑定)实际上将“红色”的值分配给您的属性,而第一个语句(无绑定)仍将分配一个“主要”的值。

另外还有三点需要注意:

  1. 您还可以通过省略方括号并使用双大括号来进行绑定,例如<mat-tab-group backgroundColor="{{primary}}"> 两者完全等效,但方括号样式对每个人都比较熟悉,除非有充分的理由,否则您应该始终使用它。
  2. 由于绑定接受 JavaScript表达式,因此您可以提供多个简单字段,例如<mat-tab-group [backgroundColor]="primary || secondary"> ,如果未定义primary字段,将从secondary字段分配值。 此外, <mat-tab-group [backgroundColor]="shade + 'blue'">将评估字段shade并将值“blue”添加到它,根据shade的值产生“lightblue”或“darkblue”。
  3. 如果您分配给的属性是布尔值,那么很容易弄乱它。 <my-comp active="true">将文本“true”分配给active属性,而<my-comp [active]="true">分配布尔值true 这可能是您代码中的一个重要区别,也可能不是。 由于两者看起来如此相似,我个人已经错过了几个月的错误。 可能还有一些潜伏在某个地方。

  ask by NikNik translate from so

未解决问题?本站智能推荐:

2回复

角度输入最小值验证[重复]

这个问题已经在这里有了答案: Angular 2 Final中的最小/最大验证器 15个答案 即使我可以成功验证required ,我也无法验证物料输入的最小数量。 我还尝试通过引用errors对象来检查验证,如下所示: 但是,这也不会显示错误,因为
1回复

带可选参数的角度计算

我正在为我们的销售代表实施一种工具,使他们能够与客户协商价格。 我正在从后端加载带有Rateplan和费用的产品列表,并在前端的表中将其显示给用户。 1个产品有n个费率计划(您只能选择一个),一个费率计划有n个费用(安装的一次性费用,每月发生0或n个固定费用,并且每次使用费用可选0-2支付)
2回复

角度对话框参数

我想实现一个对话框,其中包含一些数据 API。 在实现对话框之前,API 由参数 id 通过routerLink 调用,但是当我选择对话框时,没有相同的参数,因此我无法将 id 传递给对话框以进行 API 调用。 我试图通过对话框创建函数传递 id,但这也没有按要求工作。 HTML: T
2回复

角度参数化的默认路由

如何使用参数设置默认路由(例如:www.test.com/landing-page?uid=123&mode=front&sid=de8d4) 我的项目有一个工作流程,用户可以通过其他网站或应用程序使用查询字符串中的数据重定向到我的 Angular 应用程序。 是否可以使用带参数
1回复

角度定制验证-输入参数不变

有两个日期输入:d1和d2。 要求d2必须大于或等于d1。 默认情况下,d2的最小日期是2018-09-03,该日期存储在minDate变量中。 [一个好案例]如果用户首先输入d1, 它将触发函数onChange并将minDate更新为d1的值。 在这种情况下,如果用户要更
1回复

无法在 angular 7 中解析 MatDialogRef 的所有参数

我正在尝试以角度实现对话框弹出窗口。 我一次又一次地遇到同样的错误。 无法解析 MatDialogRef 的所有参数:(?, ?, ?, ?) 我想要做的是从我的标题上的图标打开登录作为对话框窗口。 我的代码如下: app.module.ts import {BrowserModule} f
2回复

获得材料选项角度5的值

Angular的新手,我正在尝试使用Angular Material下拉菜单。 我希望它显示月份,但当用户点击它时,我想得到月份的数字,所以我可以将它用作URL参数。 我的实际HTML代码: 在我的组件中: 当我点击select时,我可以得到viewValue ,但是我没
1回复

设置角度垫选择的值

我似乎无法设置“ mat-select”下拉列表的选定值。 我有一个用于添加服务的组件,并使用相同的组件来显示已经添加的服务。 我尝试使用NgModel并指定service.serviceId作为值,但它似乎从未出现在所选的下拉列表中。 如何使用此组件允许用户选择服务,还可以使用booki