时间戳

首页 > 解决方案 > Angular 11-数据绑定数组项

html - Angular 11-数据绑定数组项

问题描述

我正在尝试对 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;
}

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

{{elementRipe.data.announced}}

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

{{elementRipe.data.asns.holder}}

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

标签： htmlangulardata-binding

解决方案

我会去做这样的事情。

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

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

推荐阅读