Question

      <div class="gl-w-100 gl-md-w-auto gl-po-rel list">
         <div class="signin_wrpr gl-w-100 gl-po-rel gl-d-flex gl-fd-column gl-bg-white gl-lg-w-auto gl-md-w-auto gl-h-100 gl-md-ta-c">
            <div class="head gl-fs-12 gl-lh-12 gl-fw-600 gl-ff-Raleway gl-lg-fs-14 gl-lg-lh-16 " *ngFor="let item of Listitems ;let i=index" >
               <div class="gl-my-10 gl-py-10  gl-tt-u tab"  tabindex="1" > <span class="gl-pl-40 gl-md-pl-0  gl-py-10" >{{item}}</span></div>
               <div class="gl-w-80 gl-m-auto bdr"></div>
            </div>
            
         </div>
         
      </div>

      <section class="gl-po-rel gl-md-w-auto gl-ml-30 gl-md-ml-0 gl-md-mt-20" >
         <div class="signin_wrpr gl-w-100 gl-po-rel gl-d-flex gl-fd-column gl-bg-white gl-h-100" *ngFor="let p of myObj;let i= index">
            <div class="head gl-fs-19 gl-lh-15 gl-fw-400 gl-ff-Raleway gl-lg-fs-16 gl-lg-lh-16">
               <div class="gl-p-20 schemes"> {{p.Heading}}</div>
            </div>
            <div class="gl-po-rel gl-p-20 gl-ff-poppins gl-lg-fs-12 gl-lg-lh-24 gl-fs-15 gl-lh-30 gl-fw-300 gl-p-40 gl-md-p-20 gl-ta-j" >
               {{p.Description}}
            </div>
         </div>
      </section>

   </div>

当单击项目列表中的第一项时，我只想显示myObj中的第一项。即，如果单击项目列表中的第一项，则对应的（索引）项目将显示在myObj中。

Answer 1

您可以跟踪组件中的索引并显示所选的索引数据。

可用示例here

// component.ts

selectedIndex = 0; // To display first item

setIndex(i) {
  this.selectedIndex = i
}

<div class="gl-w-100 gl-md-w-auto gl-po-rel list">
         <div class="signin_wrpr gl-w-100 gl-po-rel gl-d-flex gl-fd-column gl-bg-white gl-lg-w-auto gl-md-w-auto gl-h-100 gl-md-ta-c">
            <div class="head gl-fs-12 gl-lh-12 gl-fw-600 gl-ff-Raleway gl-lg-fs-14 gl-lg-lh-16 " *ngFor="let item of Listitems ;let i=index" (click)="setIndex(i)">
               <div class="gl-my-10 gl-py-10  gl-tt-u tab"  tabindex="1" > <span class="gl-pl-40 gl-md-pl-0  gl-py-10" >{{item}}</span></div>
               <div class="gl-w-80 gl-m-auto bdr"></div>
            </div>
            
         </div>
         
      </div>

      <section class="gl-po-rel gl-md-w-auto gl-ml-30 gl-md-ml-0 gl-md-mt-20" *ngIf="myObj[selectedIndex]" >
        // myObj[selectedIndex].value // Do your stuff here
      </section>

有什么办法可以连接两个不同的ngfor吗？

1 个答案: