angular - VMWare Clarity Design System 和 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">

我的来源是这些源文件： layout.service.ts，layout.ts