VMWare清晰度设计系统和Angular 9 Ivy严格模板类型检查

Question

我的项目使用Angular（v9）和Clarity Design System（v3）。

使用Ivy和模板的严格类型检查，您如何处理clrForm元素的clrLayout？

<form clrForm clrLayout="horizontal" clrLabelSize="4">
  [...]
</form>

此表单给我以下错误消息：

• [Type 'string' is not assignable to type 'number'.代表属性clrLabelSize="4"。
• [Type '"horizontal"' is not assignable to type 'Layouts'.代表clrLayout="horizontal"。

谢谢！

参考：https://clarity.design/documentation/forms

Answer 1

我不是Clarity用户，但是检查使用Layout枚举所需的源。字符串不能用作枚举成员。要传递标签尺寸的数字，只需包装[clrLabelSize]属性，以便表达式计算为数字。否则，它将作为字符串传递。

import { Layouts } from '[pathToClarity]/layout.service';

export class YourComponent {
   Layouts = Layouts
}

<form clrForm [clrLayout]="Layouts.HORIZONTAL" [clrLabelSize]="4">