Polymer2.0 - 是否可以在 dom-repeat 中设置默认值？答案

【问题标题】：Polymer2.0 - is it possible to set default value in dom-repeat?Polymer2.0 - 是否可以在 dom-repeat 中设置默认值？
【发布时间】：2017-07-31 09:16:58
【问题描述】：

我正在尝试在 dom-repeat 中设置默认值。

在下面的示例中，如果图像不可用或未定义，我试图在 dom 重复中显示默认图像（http://img04.deviantart.net/8465/i/2009/260/f/a/blender__texture_dummy_by_3d_asuarus.jpg）

我认为，我们不能在表达式 [[item.image]]] 中使用双管道运算符

HTML：

<head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
<x-custom></x-custom>
<dom-module id="x-custom">
  <template>
    <style>
      .test{
  display:inline;
  float:left;
  border:1px solid black;
  margin:5px;
  padding:5px;
  text-align:center;
}
    </style>
    <div> Employee list: </div>
    <template is="dom-repeat" items="{{employees}}">
      <div class="test">
        <div># [[index]]</div>
        <div>First name: <span>[[item.first]]</span></div>
        <div>Last name: <span>[[item.last]]</span></div>
        <div><img src="[[item.image]]" width="50px"></div>
      </div>  
    </template>

  </template>

</dom-module>

JS：

   class XCustom extends Polymer.Element {

      static get is() { return 'x-custom'; }

      static get properties() {
        return {
          employees: {
            type: Array,
            value() {
              return [
                {first: 'Bob', last: 'Smith',image:'https://dummyimage.com/300.png/09f/fff'},
                {first: 'Adam', last: 'Gilchrist',image:'https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png'},
                {first: 'Sally', last: 'Johnson'},
              ];
            }
          }
        }
      }

    }

    customElements.define(XCustom.is, XCustom);

Codepen-https://codepen.io/nagasai/pen/EvPdLB

【问题讨论】：

标签： polymer-2.x dom-repeat polymer-2.0

【解决方案1】：

不，我们不能使用管道运算符。但是：

如果您刚刚为图像设置默认值 if not found 或 null：

<object data="[[item.image]]" type="image/png" width="50px"> <img src="http://img04.deviantart.net/8465/i/2009/260/f/a/blender__texture_dummy_by_3d_asuarus.jpg" width="50px"/> </object>

其他项目可以使用<dom-if>:

<span> <template is="dom-if" if="[[!item.first]]">DefaultValue </template> [[item.first]] </span>

我希望这会有所帮助。

【讨论】：