Angular 11-数据绑定数组项答案

【问题标题】：Angular 11- Data-binding an array itemAngular 11-数据绑定数组项
【发布时间】：2021-07-02 10:39:33
【问题描述】：

我正在尝试对 Ripe 类型元素的某些属性进行数据绑定：

export interface Ripe{
    version: string;
    data_call_status: string;
    cached: boolean;
    data: {
        is_less_specific: boolean,
        announced: boolean,
        asns: [{asn: number,
                holder: string}];
        related_prefixes: [];
        resource: string;
        type: string;
        block: {
            resource: string;
            desc: string;
            name: string;
        };
        actual_num_related: number;
        query_time: string;
        num_filtered_out: number;
    }
    query_id: string;
    process_time: number;
    server_id: string;
    build_version: string;
    status: string;
    status_code: number;
    time: string;
}

我在我的组件中设置了一个 Ripe 类型的 elementRipe，我在我的 html 文档中使用它来进行数据绑定。例如，如果要对已宣布的属性进行数据绑定，我将编写（在 html 文档中）：

{{elementRipe.data.announced}}

一切都很好，值被读取。现在我正在尝试对 asns 中的 holder 属性进行数据绑定，这是一个只有一个元素的数组（我无法更改它，这就是 API 的设置方式）。我试着写这个：

{{elementRipe.data.asns.holder}}

但未找到该值。在这种情况下，正确的语法是什么？

【问题讨论】：

标签： html angular data-binding

【解决方案1】：

我会选择这样的。

{{elementRipe.data.asns[0]?.holder}}

由于你需要访问数组中的元素，你可以加上问号，以防有一天你没有任何值。

【讨论】：

【解决方案2】：

asns 是一个数组，所以需要取第一个元素

{{ elementRipe.data.asns[0]?.holder }}

或为数组中的所有持有者映射数组

{{ elementRipe.data.asns.map( object => (object?.holder)) }}

（我不会在 HTML 上尝试这个 sintax，但在 ts 中可以正常工作）

【讨论】：