탭 밖에서 현재 선택된 매트 탭 정보를 사용합니다.

Question

두 요소가 있습니다. 하나는 ngFor 루프 내부에 있고 다른 하나는 외부에 있습니다. ngFor 루프 내에서 모든 관측 가능 값 (UsersName, SubmittedTime 등)에 액세스 할 수 있습니다. 그러나 for 루프 외부에서는 불가능합니다. 나는 그 필드에 접근 할 수있는 루프 밖에서 관측 할 수있는 상황에 접근 할 필요가있는 상황이있다. 그래서 ngModel을 사용하여이 작업을 수행하는 멋진 방법을 고안했지만 ngModel은 약간 까다 롭습니다. ngModel을 사용하여 루프 내부의 현재 참조를 가져 와서 루프 외부의 다른 곳으로 뱉어 낼 계획입니다. 나는 이것에 도움이 필요하다.

---

<mat-tab-group> 

           <-- LOOP STARTS HERE --> 
    <mat-tab label="{{ thing.FileName }}" *ngFor="let thing of collection | async"> 

        <-- MY NIFTY LITTLE TRICK (NOT SURE HOW TO MAKE IT WORK) --> 
     <input [(ngModel)]="thing.UsersName" name="UsersName" value="{{thing.UsersName}}"> 

           <-- MISCELLANEOUS CODE -->  
     <span *ngIf="thing.FileContentType == 'image/png' "> 
     <img class="ui rounded fluid image" src="{{thing.FileURL}}" style="pointer-events: none;"> 
     </span> 

    </mat-tab> 
           <-- LOOP ENDS HERE --> 

</mat-tab-group> 

<-- OUTSIDE OF MAT-TAB-GROUP --> 
<div class="content"> 
    <-- CURRENTLY SELECTED TAB'S 'USERSNAME' PROPERTY (DOESN'T WORK) --> 
    <a class="header">{{collection.UsersName}}</a> 
</div> 

타이프는

angularCollection: AngularFirestoreCollection<Submission>; 
collection: Observable<Submission[]>; 

this.angularCollection = this.afs.collection(path); 
this.collection = this.angularCollection.valueChanges(); 

Answer 1

collection가 UsersName 때에 프로퍼티없는 배열이다. 그 안에있는 객체는 이므로 collection[0].UsersName처럼 액세스 할 수 있습니다.

이

@Component({ 
    selector: 'tabs-template-label-example', 
    templateUrl: 'tabs-template-label-example.html', 
    styleUrls: ['./tabs-template-label-example.css'] 
}) 
export class TabsTemplateLabelExample { 
    tabIndex: number = 0; 
} 

some.component.html : 당신이 mat-tab-group

some.component.ts의 selectedIndex 재산 사용 필요 선택된 탭의 UsersName 때에 프로퍼티를 표시하려면

<div class="content"> 
    <!-- Show UsersName of selected tab --> 
    <a class="header">{{collection[tabIndex].UsersName}}</a> 
</div> 

<!-- set selected tab with two way data binding --> 
<mat-tab-group [selectedIndex]="tabIndex"> 

    <mat-tab label="{{ thing.FileName }}" *ngFor="let thing of collection | async"> 

    <input [(ngModel)]="thing.UsersName" name="UsersName" value="{{thing.UsersName}}"> 

    <span *ngIf="thing.FileContentType == 'image/png' "> 
     <img class="ui rounded fluid image" src="{{thing.FileURL}}" style="pointer-events: none;"> 
    </span> 

    </mat-tab> 

</mat-tab-group>