时间戳

首页 > 解决方案 > html模板数组变量中的角度10与类型声明不匹配

arrays - html模板数组变量中的角度10与类型声明不匹配

问题描述

我正在使用定义为的全局变量和类型：

全球.ts

export type ReservationCurrentPC = Array<{StartDateTime: string, EndDateTime: string, Who: string}>;
export class GlobalVariables {
    public static ReservationsCurrentPC: ReservationCurrentPC = [];
}

然后将其导入组件 .ts

import { GlobalVariables , ReservationCurrentPC } from '../GlobalVariables';

然后在 component.ts 上做了一个 getter，以便在其 html 模板中使用它。

get GetReservationsMyPC(): ReservationCurrentPC { return GlobalVariables.ReservationsCurrentPC; };

然后它执行一次推送：

case 'RSV':
    // stemp[i].Param1 = PCNameID.
    // stemp[i].Param2 = StartDate.
    // stemp[i].Param3 = EndDate.
    // stemp[i].Param4 = ReserveByAccountName.

GlobalVariables.ReservationsCurrentPC.push (stemp[i].Param2, stemp[i].Param3, stemp[i].Param4);

然后尝试在 html 模板中使用它。

    <div *ngFor="let b of GetReservationsMyPC">
        <li>
            Desde [{{b.StartDateTime}}] hasta [{{b.EndDateTime}}] reservado para: {{b.Who}}
        </li>
        <button (click)="RemReserve(b.StartDateTime)">Remover esta reserva</button>          
    </div>

问题是，html 使用变量 'b' 循环 3 次，并且它无法识别类型结构，例如每个项目 3 个字段，并且例如 b.StartDateTime 、 b.EndDateTime 、 b.Who 仅在打印时不返回任何内容只是 'b' 变量，它将推送 3 个字符串，就好像它是一个普通数组一样。

如何在 html 模板中正确处理该结构化变量？我看到了几个例子，但是，使用局部组件变量，并且有效，但是我需要使用这个全局变量，因为它需要从另一个组件（它处理用户点击的地图视图，并且对象点击地图触发了几个事件，这就是从 API 请求有关单击对象的信息的位置，并且作为响应它返回推送的数据），因此，它必须是一个全局变量，因为它在多个组件中进行处理。

标签： arraysangulartemplatesglobal

解决方案

固定的：

GlobalVariables.ReservationsCurrentPC.push ({StartDateTime: stemp[i].Param2, EndDateTime: stemp[i].Param3, Who: stemp[i].Param4 });

对我来说真是一次冒险！

推荐阅读