Angular Elements Web 组件中的 NgFor 使用 JSON 文件：如何获取值

Question

编辑：这是一个静态 HTML 文件中的 Web 组件，我只是使用 Angular 来编译它。

我正在尝试使用 Angular Elements，并创建了一个 Web 组件，它是一个简单的 NgFor，其输入来自 JSON 文件。

<div *ngFor="let name of names | keyvalue" (click)="onClick(name)">
{{name.value | json}}
</div

JSON

[ 
{  
    "id":1,
    "name": "star 1",
    "image":"https://picsum.photos/id/1059/400/400",
    "text":"Text about star 1"
},
{  
    "id":2,
    "name": "star 2",
    "image":"https://picsum.photos/id/1060/400/400",
    "text":"Text about star 2"
},
{  
    "id":3,
    "name": "star 3",
    "image":"https://picsum.photos/id/1061/400/400",
    "text":"Text about star 3"
},
{  
    "id":4,
    "name": "star 4",
    "image":"https://picsum.photos/id/1062/400/400",
    "text":"Text about star 4"
},
{  
    "id":5,
    "name": "star 5",
    "image":"https://picsum.photos/id/1063/400/400",
    "text":"Text about star 5"
},
{  
    "id":6,
    "name": "star 6",
    "image":"https://picsum.photos/id/1064/400/400",
    "text":"Text about star 6"
},
{  
    "id":7,
    "name": "star 7",
    "image":"https://picsum.photos/id/1065/400/400",
    "text":"Text about star 7"
},
{  
    "id":8,
    "name": "star 8",
    "image":"https://picsum.photos/id/1066/400/400",
    "text":"Text about star 8"
},
{  
    "id":9,
    "name": "star 9",
    "image":"https://picsum.photos/id/1067/400/400",
    "text":"Text about star 9"
},
{  
    "id":10,
    "name": "star 10",
    "image":"https://picsum.photos/id/1068/400/400",
    "text":"Text about star 10"
}
]

在浏览器中输出

  { "id": 1, "name": "star 1", "image": "https://picsum.photos/id/1059/400/400", "text": "Text about star 1" }
  { "id": 2, "name": "star 2", "image": "https://picsum.photos/id/1060/400/400", "text": "Text about star 2" }
  { "id": 3, "name": "star 3", "image": "https://picsum.photos/id/1061/400/400", "text": "Text about star 3" }
  { "id": 4, "name": "star 4", "image": "https://picsum.photos/id/1062/400/400", "text": "Text about star 4" }
  { "id": 5, "name": "star 5", "image": "https://picsum.photos/id/1063/400/400", "text": "Text about star 5" }
  { "id": 6, "name": "star 6", "image": "https://picsum.photos/id/1064/400/400", "text": "Text about star 6" }
  { "id": 7, "name": "star 7", "image": "https://picsum.photos/id/1065/400/400", "text": "Text about star 7" }
  { "id": 8, "name": "star 8", "image": "https://picsum.photos/id/1066/400/400", "text": "Text about star 8" }
  { "id": 9, "name": "star 9", "image": "https://picsum.photos/id/1067/400/400", "text": "Text about star 9" }
  { "id": 10, "name": "star 10", "image": "https://picsum.photos/id/1068/400/400", "text": "Text about star 10" }

我想要做的是访问此对象中的属性，因此当我单击其中一个属性时，它会使用图像值中的源更新另一个元素的 img src。

如果我返回模板并尝试使用 {{name.value.image}} 我会收到错误：

类型“字符串”上不存在属性“图像”。

如何访问此对象中的图像值，以便在其他地方使用它？

请记住，我正在使用 Angular Elements 编译它并在静态 html 页面中使用它。谢谢

Answer 1

由于names是一个对象数组，所以这里不需要使用keyvalue。

试试这样：

<div *ngFor="let name of names" (click)="onClick(name)">
    {{name.image}}
</div>

Answer 2

我认为你需要这样的东西：

component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
public names = [ 
{  
    "id":1,
    "name": "star 1",
    "image":"https://picsum.photos/id/1059/400/400",
    "text":"Text about star 1"
},
{  
    "id":2,
    "name": "star 2",
    "image":"https://picsum.photos/id/1060/400/400",
    "text":"Text about star 2"
},
{  
    "id":3,
    "name": "star 3",
    "image":"https://picsum.photos/id/1061/400/400",
    "text":"Text about star 3"
},
{  
    "id":4,
    "name": "star 4",
    "image":"https://picsum.photos/id/1062/400/400",
    "text":"Text about star 4"
},
{  
    "id":5,
    "name": "star 5",
    "image":"https://picsum.photos/id/1063/400/400",
    "text":"Text about star 5"
},
{  
    "id":6,
    "name": "star 6",
    "image":"https://picsum.photos/id/1064/400/400",
    "text":"Text about star 6"
},
{  
    "id":7,
    "name": "star 7",
    "image":"https://picsum.photos/id/1065/400/400",
    "text":"Text about star 7"
},
{  
    "id":8,
    "name": "star 8",
    "image":"https://picsum.photos/id/1066/400/400",
    "text":"Text about star 8"
},
{  
    "id":9,
    "name": "star 9",
    "image":"https://picsum.photos/id/1067/400/400",
    "text":"Text about star 9"
},
{  
    "id":10,
    "name": "star 10",
    "image":"https://picsum.photos/id/1068/400/400",
    "text":"Text about star 10"
}
];


public imgSrc = '';

public setSource(name) {
  this.imgSrc = name.image;
}
}

和 HTML：

<div *ngFor="let name of names" (click)="setSource(name)">
{{name.image | json}}
</div>

<img [src]="imgSrc" >

Answer 3

好的，所以我意识到我做错了什么。因为它是一个 Web 组件，并且任何字符串或对象都可以通过 html 属性传递，所以我不知道在以角度编译组件时属性名称是什么。所以names.anything在编译的时候会报错。

解决方案是通过@Output 发出整个对象，在html 脚本中添加一个事件监听器，然后从事件对象中选择属性。希望下面的内容能够清楚地说明我想要实现的目标以及我遇到问题的原因。 <name-list/> 是我的 web 组件的名称，在幕后看起来像 <name-list names="{object}"/>

<name-list />
<img></img>
<script src="elementCommunicationWithDom.js"></script>// this is the compiled Angular elements file
<script>
    init();
    function loadJSON(callback) {   //needed to access local JSON file

        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'data.json', true);
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {
                callback(xobj.responseText);
            }
        };
        xobj.send(null);
    }

    function init() {
        loadJSON(function (response) {
            var obj = JSON.parse(response);
            let element = document.querySelector('name-list');
            element.names = obj; //set the html property names created in @input in Angular to the object
        });
    }

    let element = document.querySelector('name-list');
    let img = document.querySelector('img');
    element.addEventListener("onSelectItem", (event) => { //gets the output of @Output which is onSelectItem
        img.src = event.detail.image;
        console.log(event.detail.image)
    })

</script>