0

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

故事书ng-select选择被命名为，common-ng-select并且这个组件正在变得很好，但是它的数据选项，作为一个名为的道具传递items并没有进入故事书组件。

这items是ng-select组件的输入，并在其API Doc中有详细记录。它应该采用任何数组或对象数组。（在下面的这种情况下，我传递了一个对象数组）。

我正在遵循这个故事书文档中的样板指南来传递一组对象，作为要渲染的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)

我countries从我的 vscode 中收到关于第二个变量的以下类型分配错误。尽管如此，我几乎完全按照这个官方指南

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'.

更新 - 在我在这里提出这个问题之后，我认为ng-select repo 中有一个开放的错误

4

1 回答 1

0

我看到你已经在 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)
  }

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

于 2020-05-25T05:54:01.303 回答