如何让我的 *ngFor 中的第一项默认处于活动状态？

Question

我在 Angular 2.

中有一个单选按钮组件

<div
    class="states"
    *ngFor="let state of states; let i = index"
    [ngClass]="{'selected': showElement === state}"
    (click)="trackCurrentState(state)">
    <div class="radio">
        <div class="outside">
            <div
                class="inside"
                *ngIf="showElement === state">
            </div>
        </div>
    </div>
    <p2>{{state.name}}</p2>
</div>

*ngFor 循环遍历它们并将它们显示在另一个组件内。加载我的变量 'showElement' returns 未定义，直到用户单击其中一个单选按钮。所以在加载时我有一组单选按钮，但其中 none 被选中，直到用户单击一个。我希望默认选择单选按钮组中的第一个按钮（对象数组中的第一项）。我需要将 class 'inside' 应用于第一个单选按钮，直到用户单击另一个单选按钮。我怎样才能做到这一点？

Answer 1

如果我猜对了你需要什么，那就是：

  this.showElement = this.states[0]

Answer 2

要将 "inside" class 赋予所选选项，您只需使用：

<div [class.inside]="showElement"> </div>

并预选一个选项：

 this.showElement = this.states[0];

在您的构造函数中或在 ngOnInit、ngAfterViewInit 中 - 取决于您初始化 this.showElement 和 this.states

的位置

如何让我的 *ngFor 中的第一项默认处于活动状态？

How can I make the first item in my *ngFor active by default?

arrays

components

ngfor

angular