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"。

谢谢！

Ref: 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

VMWare Clarity Design System 和 Angular 9 Ivy 严格的模板类型检查

VMWare Clarity Design System and Angular 9 Ivy strict template type checking

vmware

ivy

clarity

angular