Javascript 默认情况下，如何使my*ngFor中的第一个项目处于活动状态（即活动项目的边框颜色应与其他项目的边框颜色不同）

目前，我正在开发Angular 8应用程序。我想 默认情况下，使循环的第一项处于活动状态。活跃的，活跃的 边框颜色变了。为了进一步澄清我的问题，我还 附上一张照片。在下图中，您可以看到第一个 类别是“鸡肉”。因此，默认情况下必须选择它。任何帮助都将不胜感激。 谢谢大家!

我的HTML

        <div class="category-slider swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="margin-right: 100px;" *ngFor="let i = index; let category of brand_Categories">
              <a href="javascript:void(0);" (click)="getSubCategories(category.CategoryId,category?.CategoryTitle)"
                 class="categories">
                 <div>
                <div class="icon text-custom-white bg-light-green" id="myDIV" (click)="toggle(i)" [ngClass]="(selectedID == i) ? 'selected' : 'not-selected' ">

                      <img
                      src="{{category?.CategoryImage || 'https://giftclubimagestorage.blob.core.windows.net/images/biryani.jpg'}}"
                      class="rounded-circle"
                      alt="{{category?.CategoryTitle || ''}}" class="imgrr">

                </div>
              </div>
                <span class="text-light-black cat-name">{{category?.CategoryTitle || ''}}</span>
              </a>
            </div>
          </div>

---

如何使用*ngFor上下文中提供的

第一个

变量

选择性地

---

如何使用*ngFor上下文中提供的
第一个
变量



选择性地

这是我尝试过的一个例子

html

ts

这是我试过的一个例子

html

ts

您好，您可以尝试在ngOninit（）中将selectedID设置为0。我已经尝试过了，但它不起作用。也许你可以通过代码详细说明谢谢，伙计。成功了。很抱歉，我之前犯了一个错误。您好，您可以尝试在ngOninit（）中将selectedID设置为0。我已经尝试过了，但它不起作用。也许你可以通过代码详细说明谢谢，伙计。成功了。糟糕的是，我之前犯了一个错误。
<div fxLayout="row" fxLayoutGap="20px">
  <div *ngFor="let item of items; let i = index;">
    <div class="item" [ngClass]="{'selected-item': selectedID == i}" (click)="selectItem(i)">{{item}}</div>
  </div>
</div>

.item {
    padding: 10px;
    border: solid 1px grey;
}
.selected-item {
    border: solid 2px green;
}

public items = ['Item1', 'Item2', 'Item3', 'Item4'];
public selectedID = 0;

selectItem(i){
  this.selectedID = i;
}