时间戳

首页 > 解决方案 > 如何在 Angular 中显示继承对象列表？

angular - 如何在 Angular 中显示继承对象列表？

问题描述

我想显示从 Angular 中的同一个抽象类继承的不同对象的列表。这样做的好习惯是什么？

让我们假设以下简单模型：

abstract class Vehicle {
     wheels: number;
}

class Car extends Vehicle {
     isConvertible: boolean;
}

class Truck extends Vehicle {
     freight: string;
}

我的方法有效，但它似乎很丑陋，而不是 oop 方式。

HTML 模板：

<ul>
    <li *ngFor="let vehicle of vehicles">
        <p>{{vehicle.wheels}}</p>
        <p *ngIf="isCar(vehicle)">{{asCar(vehicle).isConvertible}}</p>
        <p *ngIf="isTruck(vehicle)">{{asTruck(vehicle).freight}}</p>
    </li>
</ul>

零件：

@Component({
    [...]
})
export class VehicleInfoComponent{

    @Input() vehicles: Vehicles[];

    public isCar(vehicle: Vehicle): boolean {
         return vehicle instanceof Car;
    }

    public isTruck(vehicle: Vehicle): boolean {
         return vehicle instanceof Truck;
    }

    public asCar(vehicle: Vehicle): Car{
        return vehicle as Car;
    }

    public asTruck(vehicle: Vehicle): Truck{
        return vehicle as Truck;
    }
}

有没有更好的 oop 方法来做到这一点？

标签： angulartypescriptoop

解决方案

我不知道它是否比你的更好，或者它是否有任何好处。如果你喜欢，试着做你想做的事。希望它是有用的。

@Component({
    [...]
})
export class ActionInfoComponent{

    @Input() vehicles: Vehicles[]

    public getClass(vehicle: Vehicle): string{
         return vehicle.constructor.name
    }
}

和 HTML

<ul>
    <li *ngFor="let vehicle of vehicles">
        <p>{{vehicle.wheels}}</p>
        <p *ngIf="getClass(vehicle) == 'Car'">{{vehicle.isConvertible}}</p>
        <p *ngIf="getClass(vehicle) == 'Truck'">{{vehicle.freight}}</p>
    </li>
</ul>

推荐阅读