有没有办法连接两个不同的ngfor？

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>

when click on first item in itemlist i want to display only the first item in myObj.ie,if i click first item in itemlist,corresponding (index) item display in myObj

Answer 1

You can keep track of index in component and show the selected index data.

Example available 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>