Свойство объекта LitElement имеет значение null

Question

У меня есть компонент, который принимает объект как свойство, но по какой-то причине при рендеринге this.item не определено.

      @property({type: Object}) item?: {
    family: {iconUrl: string; name: string};
} | null;

static get styles(): CSSResult[] {
    return [
        css`
            ${unsafeCSS(styles)}
        `
    ];
}

render(): TemplateResult {
    if (this.item) { 
       return html`<div>found item</div>
     } else {
       return html`<div>item not found</div>
     }
}
 

В моем HTML есть следующее:

      const item = {  
   family: {
      name: 'title',
      iconUrl: 'url'
   } 

}

html`<my-component item="${item}"></my-component>

Что-то мне не хватает, чтобы принять объект в качестве аргумента? Я пробовал настроить несколько вещей, например, сделать arg .item="{ }" безрезультатно.

Answer 1

Используйте синтаксис свойства без строковых кавычек:

      html`<my-component .item=${item}></my-component>`

Вы можете сказать Lit, чтобы он не проверял строковый атрибут:

      @property({attribute: false}) item?: {
    family: {iconUrl: string; name: string};
};

Вам не нужно явное null если вы не хотите обращаться с этим иначе, чем undefined (это значение по умолчанию, если вы его не устанавливаете).