故事书 6 - 如何设置对象数组？

Question

我想为我的 Badge 组件传递数据道具，但我对来自 addon-knobs 库的 array 方法有疑问。数据道具是一个对象数组，我试图像这样传递它：

const data = [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
];

结果是我有 2 个字段（第一个和第二个），但是当我想更改其中的值时，它们不会在屏幕上更新。

第二次尝试：

const data = array('List of items', [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
]);

这给了我相同的结果，但我得到了 3 个字段而不是 2 个字段，而第三个字段的值 [object Object]

第三次尝试：

const data = array('List of items', [
  {color: '#fa2dac', text: 'RSS'},
  {color: '#fa2dac', text: 'RSS'},
]);

这让我只提交了[object Object]

如何添加带有对象数组的旋钮并进行全面更新？

Answer 1

使用“@storybook/addon-knobs”：“6.0.21”，“@storybook/angular”：“6.0.21”，

我有一个对象数组，我将其作为@Input() 链接传递：Links[];通过此设置，您将能够传递任何 JSON 对象。 角度组件：

export class HeaderComponent  {
  @Input() links: Link[] = [];
  @Output() navigate = new EventEmitter<any>();

  linkClicked(link: Link){
    this.navigate.emit(link);
  }
}

从'@storybook/addon-knobs'导入{文本、数字、布尔值、数组、选择、对象}；

import { HeaderComponent, Link } from './header.component';

export default {
  title: 'HeaderComponent'
}
let links: Link[] = [{name: "link one", route: ""}] 
export const primary = () => ({
  moduleMetadata: {
    imports: []
  },
  component: HeaderComponent,
  props: {
    links: object("links",links)
  }

})

Answer 2

我将数据数组移动到组件中，它现在可以正常工作了。我唯一注意到对象数组必须使用object 方法传递，现在它可以工作并刷新页面。

export const Primary = () => {
  const data = object('List of items', [
    {color: '#fa2dac', text: 'RSaS'},
    {color: '#fa2dac', text: 'RSaS'},
  ]);
  return <Badge data={data}></Badge>;
};