Javascript 聚合物DOM根据接收到的数据重复内容
我重复了一次DOM，它接收多种类型的数据。Javascript 聚合物DOM根据接收到的数据重复内容,javascript,html,dom,polymer,polymer-2.x,Javascript,Html,Dom,Polymer,Polymer 2.x,我重复了一次DOM，它接收多种类型的数据。 现在我希望DOM repeat只显示与该类型相关的项。 有可能做到这一点吗？我如何才能做到这一点？ 当item.Type为Zone时，我希望它显示item.Name和item.ZoneID 当item.Type为Building时，我希望它显示item.BuildingID、item.Address1和item.Address2 这是我的代码： <template is="dom-repeat" items="[[data]]">
现在我希望DOM repeat只显示与该类型相关的项。
有可能做到这一点吗？我如何才能做到这一点？
当item.Type为Zone时，我希望它显示item.Name和item.ZoneID
当item.Type为Building时，我希望它显示item.BuildingID、item.Address1和item.Address2 这是我的代码：
<template is="dom-repeat" items="[[data]]">
<paper-card id="departmentspaperContainer2">
<div class="card-content">
<h3>Type: {{item.Type}}</h3>
<hr/>
<h4>Name: {{item.Name}}</h4>
<h4>BuildingID: {{item.BuildingID}}</h4>
<h4>ZoneID: {{item.ZoneID}}</h4>
<h4>Address1: {{item.Address1}}</h4>
<h4>Address2: {{item.Address2}}</h4>
</div>
</paper-card>
</template>
类型：{{item.Type}
名称：{{item.Name}
BuildingID:{{item.BuildingID}}
ZoneID:{{item.ZoneID}}
地址1:{{item.Address1}}
地址2:{{item.Address2}}
进入dom repeat
作为休耕，您可以使用dom
<template is="dom-repeat" items="[[data]]">
<paper-card id="departmentspaperContainer2">
<div class="card-content">
<h3>Type: {{item.Type}}</h3>
<hr/>
<h4>Name: {{item.Name}}</h4>
<template is='dom-if' if='{{_show(item.Type)}}'>
<h4>ZoneID: {{item.ZoneID}}</h4>
</template>
<template is='dom-if' if='{{!_show(item.Type)}}'>
<h4>BuildingID: {{item.BuildingID}}</h4>
<h4>Address1: {{item.Address1}}</h4>
<h4>Address2: {{item.Address2}}</h4>
</template>
</div>
</paper-card>
</template>
用以上逻辑应该可以解决问题 如果进入dom repeat
作为休耕，您可以使用dom
<template is="dom-repeat" items="[[data]]">
<paper-card id="departmentspaperContainer2">
<div class="card-content">
<h3>Type: {{item.Type}}</h3>
<hr/>
<h4>Name: {{item.Name}}</h4>
<template is='dom-if' if='{{_show(item.Type)}}'>
<h4>ZoneID: {{item.ZoneID}}</h4>
</template>
<template is='dom-if' if='{{!_show(item.Type)}}'>
<h4>BuildingID: {{item.BuildingID}}</h4>
<h4>Address1: {{item.Address1}}</h4>
<h4>Address2: {{item.Address2}}</h4>
</template>
</div>
</paper-card>
</template>
用以上逻辑应该可以解决问题 类似于“HakanC”的建议，但不同的是，如果
并绑定过滤函数的响应，则可以使用dom：
这是一个工作（在chrome中使用）
类型：[[item.Type]]
名称：[[item.Name]]
ZoneID:[[item.ZoneID]]
BuildingID:[[item.BuildingID]]
地址1:[[项目地址1]]
地址2:[[项目地址2]]
类OsTestElement扩展聚合物。元素{
静态get是（）{
返回“操作系统测试”；
}
静态获取属性（）{
返回{
数据：{
类型：数组，
值：（）=>{
返回[
{
类型：“区域”，
名称：“valueName1”，
BuildingID:“valueBuildingID1”，
ZoneID:“ValueZoneId 1”，
地址1：“valueAddress11”，
地址2：“valueAddress21”，
},
{
类型：“区域”，
名称：“valueName2”，
BuildingID:“valueBuildingID2”，
ZoneID:“ValueZoneId 2”，
地址1：“valueAddress12”，
地址2：“valueAddress22”，
},
{
类型：“建筑物”，
名称：“valueName3”，
BuildingID:“valueBuildingID3”，
ZoneID:“ValueZoneId 3”，
地址1：“valueAddress13”，
地址2：“valueAddress23”，
},
{
类型：“建筑物”，
名称：“valueName4”，
BuildingID:“valueBuildingID4”，
ZoneID:“ValueZoneId 4”，
地址1：“valueAddress14”，
地址2：“valueAddress24”，
}
]
}
}
}
}
展区（项目）{
返回（项目=“区域”）；
}
展馆（项目）{
返回（项目=“建筑”）；
}
}
window.customElements.define（ostedlement.is，ostedlement）；
类似于“HakanC”的建议，但不同的是，如果
并绑定过滤函数的响应，则可以使用dom：
这是一个工作（在chrome中使用）
类型：[[item.Type]]
名称：[[item.Name]]
ZoneID:[[item.ZoneID]]
BuildingID:[[item.BuildingID]]
地址1:[[项目地址1]]
地址2:[[项目地址2]]
类OsTestElement扩展聚合物。元素{
静态get是（）{
返回“操作系统测试”；
}
静态获取属性（）{
返回{
数据：{
类型：数组，
值：（）=>{
返回[
{
类型：“区域”，
名称：“valueName1”，
BuildingID:“valueBuildingID1”，
ZoneID:“ValueZoneId 1”，
地址1：“valueAddress11”，
地址2：“valueAddress21”，
},
{
类型：“区域”，
名称：“valueName2”，
BuildingID:“valueBuildingID2”，
ZoneID:“ValueZoneId 2”，
地址1：“valueAddress12”，
地址2：“valueAddress22”，
},
{
类型：“建筑物”，
名称：“valueName3”，
BuildingID:“valueBuildingID3”，
ZoneID:“ValueZoneId 3”，
地址1：“valueAddress13”，
地址2：“valueAddress23”，
},
{
类型：“建筑物”，
名称：“valueName4”，
BuildingID:“valueBuildingID4”，
ZoneID:“ValueZoneId 4”，
地址1：“valueAddress14”，
地址2：“valueAddress24”，
}
]
}
}
}
}
展区（项目）{
返回（项目=“区域”）；
}
展馆（项目）{
返回（项目=“建筑”）；
}
}
window.customElements.define（ostedlement.is，ostedlement）；
在进行您描述的更改后，数据将不再显示在我的屏幕上。在检查之后，它看起来像是通过数据运行的函数，但是在它停止之后，如果它是真的或假，什么都不会发生。我认为它需要一些小的安排。我将用我的一方测试它，而不是纠正它。但是逻辑应该是有效的，在进行了您描述的更改之后，数据将不再显示在我的屏幕上。在检查完后
<dom-module id="os-test">
<template>
<template is="dom-repeat" items="{{data}}">
<paper-card id="departmentspaperContainer2">
<div class="cardContent" type="{{item.Type}}">
<h3>Type: [[item.Type]]</h3>
<hr/>
<template is='dom-if' if='{{showZone(item.Type)}}'>
<h4>Name: [[item.Name]]</h4>
<h4>ZoneID: [[item.ZoneID]]</h4>
</template>
<template is='dom-if' if='{{showBuilding(item.Type)}}'>
<h4>BuildingID:[[item.BuildingID]]</h4>
<h4>Address1: [[item.Address1]]</h4>
<h4>Address2: [[item.Address2]]</h4>
</template>
</div>
</paper-card>
</template>
</template>
</dom-module>
<script>
class OsTestElement extends Polymer.Element {
static get is() {
return 'os-test';
}
static get properties() {
return {
data: {
type: Array,
value: () => {
return [
{
Type:"Zone",
Name:"valueName1",
BuildingID:"valueBuildingID1",
ZoneID:"valueZoneID1",
Address1:"valueAddress11",
Address2:"valueAddress21",
},
{
Type:"Zone",
Name:"valueName2",
BuildingID:"valueBuildingID2",
ZoneID:"valueZoneID2",
Address1:"valueAddress12",
Address2:"valueAddress22",
},
{
Type:"Building",
Name:"valueName3",
BuildingID:"valueBuildingID3",
ZoneID:"valueZoneID3",
Address1:"valueAddress13",
Address2:"valueAddress23",
},
{
Type:"Building",
Name:"valueName4",
BuildingID:"valueBuildingID4",
ZoneID:"valueZoneID4",
Address1:"valueAddress14",
Address2:"valueAddress24",
}
]
}
}
}
}
showZone(item) {
return (item==="Zone");
}
showBuilding(item) {
return (item==="Building");
}
}
window.customElements.define(OsTestElement.is, OsTestElement);
</script>