[英]Using the currently selected mat-tab's info outside of the tab
I have two elements. 我有两个要素。 One inside an ngFor loop, and one outside.
一个在ngFor循环内部,另一个在外部。 Inside the ngFor loop, I can access all my observable's values (UsersName, SubmittedTime, etc).
在ngFor循环中,我可以访问所有可观察的值(UsersName,SubmittedTime等)。 Outside the for loop however, I cannot.
但是在for循环之外,我不能。 I have a situation that requires accessing that observable outside of the loop where I can access those fields.
我遇到一种情况,需要在循环之外访问该可观察的值,在这里可以访问这些字段。 So I devised a nifty way to use ngModel to make this work, but ngModel is a bit tricky for me.
因此,我设计了一种使用ngModel进行这项工作的好方法,但是ngModel对我来说有点棘手。 I plan on using ngModel to take the current reference inside the loop and spit it out elsewhere outside of the loop.
我计划使用ngModel在循环内获取当前引用,并将其吐出循环外的其他位置。 I need help with this.
我需要这方面的帮助。
<-- 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>
Typescript 打字稿
angularCollection: AngularFirestoreCollection<Submission>;
collection: Observable<Submission[]>;
this.angularCollection = this.afs.collection(path);
this.collection = this.angularCollection.valueChanges();
collection
is an array it does not have UsersName
propery. collection
是一个数组,它没有UsersName
。 The objects inside it have, so you can access it like collection[0].UsersName
. 它内部具有对象,因此您可以像
collection[0].UsersName
一样对其进行访问。 To show UsersName
propery of selected tab you need to use selectedIndex
property of mat-tab-group
要显示所选标签的
UsersName
属性,您需要使用mat-tab-group
selectedIndex
属性
some.component.ts: 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: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.