淘汰赛foreach循环绑定不起作用

Question

我写了下面的脚本，但是没有发生与foreach循环的数据绑定。请让我知道我在这里做错了什么...我尝试使用$ data，$ root等。但是我无法将数据绑定到表上。

请告诉我是否有任何视图模型调试工具以及如何使用它。

打字稿

    import * as ko from "knockout";

    class Meal {
        mealName: string
        price: number

        constructor(meal: string, price: number) {
            this.mealName = meal;
            this.price = price;
        }
    }

    class SeatReservation {
        passengerName: string
        selectedMeal: Meal

        constructor(name: string, meal: Meal) {
            this.passengerName = name;
            this.selectedMeal = meal;
        }
    }

    class PassengerViewModel {

        availableMeals: Meal[]
        seats: SeatReservation[]

        constructor() {
            var self = this;
            self.availableMeals = [
                new Meal("Sandwich", 10),
                new Meal("Chicken Biriyani", 100),
                new Meal("Al Faham", 1000)
            ];
            self.seats = [
                new SeatReservation("Iliyas", this.availableMeals[0]),
                new SeatReservation("Sri", this.availableMeals[0])
            ];
        }
    }

    let vm = new PassengerViewModel();
    ko.applyBindings(vm);

HTML

<table>
    <thead>
        <tr>
            <th>Passenger Name</th>
            <th>Meal</th>
            <th>Cost</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: seats">
        <tr>
            <td><strong data-bind="text: passengerName">todo</strong></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>