带有旋钮的角故事书（storybookjs/addons/knobs）带有select（）的对象数组不起作用

Posted 2023-02-19

【中文标题】带有旋钮的角故事书（storybookjs/addons/knobs）带有select（）的对象数组不起作用

【英文标题】：Angular storybook withKnobs (storybookjs/addons/knobs) array of objects with select() is not working

【发布时间】：2020-09-09 05:06:53

【问题描述】：

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

故事书ng-select 选择被命名为common-ng-select，并且该组件正在渲染良好，但它的数据选项，作为名为@9​​87654330@ 的道具传递，不会进入故事书组件。

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

我正在遵循this storybook documentation 的样板指南，将对象数组作为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() 

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

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 上收到以下类型分配错误。尽管如此，我几乎完全关注this official guide

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 提出这个问题后，发现有一个 open bug in ng-select repo

【参考方案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)
  

我无法测试它，如果它有效，请告诉我。

【讨论】：

试过了。没有解决问题。感谢您的回答。

这很奇怪。 // @ts-ignore 怎么样？