首页 文章

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

提问于
浏览 次
-1

我在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'返回undefined，直到用户单击其中一个单选按钮 . 因此，在加载时，我有一组单选按钮，但在用户单击一个按钮之前，它们都不会被选中 . 我想默认选择单选按钮组（对象数组中的第一项）中的第一个按钮 . 我需要将我的课程“内部”应用到第一个单选按钮，直到用户单击另一个 . 我怎么能做到这一点？
arrays angular components ngfor

2 回答

  • 1

    要为所选选项提供“内部”类，您只需使用：

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

    并预选一个选项：

    this.showElement = this.states[0];

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

    回复于
  • 1

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

    this.showElement = this.states[0]
    回复于

相关问题