Question

我有两个要素。一个在ngFor循环中，一个在外面。在ngFor循环中，我可以访问所有可观察的值（UsersName，SubmittedTime等）。然而，在for循环之外，我不能。我有一种情况需要访问循环外部的可观察对象，我可以访问这些字段。所以我设计了一种使用ngModel来完成这项工作的好方法，但ngModel对我来说有点棘手。我打算使用ngModel在循环中获取当前引用并将其吐出循环外的其他地方。我需要帮助。

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

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

打字稿

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

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

Answer 1

collection是一个没有UsersName属性的数组。它里面的物体都有，所以你可以像collection[0].UsersName一样访问它。要显示您需要的所选标签的UsersName属性使用selectedIndex

的mat-tab-group属性

some.component.ts：

@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：

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

使用选项卡外部当前选定的mat-tab信息

1 个答案: