带有 select() 的对象数组的 Angular storybook with Knobs (storybookjs

Question

我对 Angular 比较陌生，在这里我尝试在 Angular 项目中使用 ng-select 和 storybook 实现一个非常基本的故事书组件，并使用 storybookjs/addons/knobs

故事书ng-select选择被命名为common-ng-select并且此组件正在呈现良好，但其数据选项(作为名为items的道具传递(不会进入故事书组件。

items是ng-select组件的输入，并在其 API 文档中有很好的文档记录。它应该接受任何数组或对象数组。(在下面的例子中，我传递了一个对象数组(。

我遵循此故事书文档中的样板指南，将对象数组作为道具传递给ng-select组件，作为渲染items。

这是我在可重用的故事书组件(ng-select.component.ts(中的代码

import { Component, Input, ViewEncapsulation } from "@angular/core";
@Component({
selector: `common-ng-select`,
template: `<ng-select class="common-ng-select" [items]="items" ></ng-select>`,
styleUrls: ["./ng-select.component.scss"],
encapsulation: ViewEncapsulation.None
})
export class NgSelectComponent {
@Input()
items: any;
constructor() {}
}

下面是我在项目stories目录中的代码(index.stories.ts(。

stories/ng-select/index.stories.ts

import {
NgSelectComponent,
CommonNgSelectModule
} from "../../../projects/src/public-api";
import { moduleMetadata } from "@storybook/angular";
import { withKnobs } from "@storybook/addon-knobs";
import { select } from "@storybook/addon-knobs";

const countries = [
{ id: 1, countryId: "L", name: "Lithuania" },
{ id: 2, countryId: "U", name: "USA" },
{ id: 3, countryId: "A", name: "Australia" }
];
const groupId = "GROUP-ID3";
export default {
title: "Common Ng Select",
decorators: [
withKnobs,
moduleMetadata({
imports: [CommonNgSelectModule ]
})
]
};
export const SimpleNgSelect = () => ({
component: NgSelectComponent,
template: `
<common-ng-select [items]="items" >
</common-ng-select> `,
props: {
items: select("items", countries, countries[0], groupId)
}
});

但在上面一行

items: select("items", countries, countries[0], groupId)

我在 vscode 的第二个变量countries上收到以下类型分配错误。尽管如此，我几乎完全遵循此官方指南

Argument of type '{ id: number; countryId: string; name: string; }[]' is not assignable to parameter of type 'SelectTypeOptionsProp<SelectTypeKnobValue>'.
Type '{ id: number; countryId: string; name: string; }[]' is not assignable to type '(string | number)[]'.
Type '{ id: number; countryId: string; name: string; }' is not assignable to type 'string | number'.
Type '{ id: number; countryId: string; name: string; }' is not assignable to type 'number'.

更新 - 在我在 SO 提出这个问题后，发现 ng-select 存储库中有一个未解决的错误

Answer 1

我看到你已经在 GitHub 中找到了这个问题 https://github.com/storybookjs/storybook/issues/9751

这是一个已知的错误，将来会修复，因此您当前的方法没有任何问题。作为解决方法，您可以尝试执行此操作

const countries: any = [
{ id: 1, countryId: "L", name: "Lithuania" },
{ id: 2, countryId: "U", name: "USA" },
{ id: 3, countryId: "A", name: "Australia" }
];

或

props: {
items: select("items", countries as any, countries[0], groupId)
}

我无法测试它，请让我知道它是否有效。