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循环遍历它们并将它们显示在另一个组件内。加载我的变量＆＃39; showElement＆＃39;返回undefined，直到用户单击其中一个单选按钮。因此，在加载时，我有一组单选按钮，但在用户单击一个按钮之前，它们都不会被选中。我想默认选择单选按钮组（对象数组中的第一项）中的第一个按钮。我需要申请我的班级内部＆＃39;到第一个单选按钮，直到用户单击另一个。我怎么能做到这一点？

Answer 1

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

  this.showElement = this.states[0]

Answer 2

要将“inside”类赋予所选选项，您只需使用：

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

并预选一个选项：

 this.showElement = this.states[0];

在你的构造函数或ngOnInit，ngAfterViewInit中 - 取决于你初始化this.showElement和this.states的位置

如何在默认情况下将* ngFor中的第一项设为活动状态？

2 个答案: