Minor improvement.

src/Squidex/app/features/administration/pages/users/users-page.component.ts

@@ -37,14 +37,6 @@ export class UsersPageComponent implements OnInit {
         this.usersState.search(this.usersFilter.value).onErrorResumeNext().subscribe();
     }
 
-    public lock(user: UserDto) {
-        this.usersState.lock(user).onErrorResumeNext().subscribe();
-    }
-
-    public unlock(user: UserDto) {
-        this.usersState.unlock(user).onErrorResumeNext().subscribe();
-    }
-
     public goPrev() {
         this.usersState.goPrev().onErrorResumeNext().subscribe();
     }
@@ -53,8 +45,16 @@ export class UsersPageComponent implements OnInit {
         this.usersState.goNext().onErrorResumeNext().subscribe();
     }
 
-    public trackByUser(index: number, user: UserDto) {
+    public lock(user: UserDto) {
-        return user.id;
+        this.usersState.lock(user).onErrorResumeNext().subscribe();
+    }
+
+    public unlock(user: UserDto) {
+        this.usersState.unlock(user).onErrorResumeNext().subscribe();
+    }
+
+    public trackByUser(index: number, user: { user: UserDto }) {
+        return user.user.id;
     }
 }
 

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html

@@ -15,7 +15,7 @@
         <ng-container *ngIf="contributorsState.contributors | async; let contributors">
             <table class="table table-items table-fixed">
                 <tbody>
-                    <ng-template ngFor let-contributorInfo [ngForOf]="contributors">
+                    <ng-template ngFor let-contributorInfo [ngForOf]="contributors" [ngForTrackBy]="trackByContributor">
                         <tr>
                             <td class="cell-user">
                                 <img class="user-picture" [attr.title]="contributorInfo.contributor.contributorId | sqxUserName" [attr.src]="contributorInfo.contributor.contributorId | sqxUserPicture" />

src/Squidex/app/features/settings/pages/contributors/contributors-page.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, Injectable, OnInit } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { Observable } from 'rxjs';
 
@@ -19,16 +19,17 @@ import {
     UsersService
 } from '@app/shared';
 
+@Injectable()
 export class UsersDataSource implements AutocompleteSource {
     constructor(
-        private readonly usersService: UsersService,
+        private readonly contributorsState: ContributorsState,
-        private readonly component: ContributorsPageComponent
+        private readonly usersService: UsersService
     ) {
     }
 
     public find(query: string): Observable<any[]> {
         return this.usersService.getUsers(query)
-            .withLatestFrom(this.component.contributorsState.contributors, (users, contributors) => {
+            .withLatestFrom(this.contributorsState.contributors, (users, contributors) => {
                 const results: any[] = [];
 
                 for (let user of users) {
@@ -44,10 +45,12 @@ export class UsersDataSource implements AutocompleteSource {
 @Component({
     selector: 'sqx-contributors-page',
     styleUrls: ['./contributors-page.component.scss'],
-    templateUrl: './contributors-page.component.html'
+    templateUrl: './contributors-page.component.html',
+    providers: [
+        UsersDataSource
+    ]
 })
 export class ContributorsPageComponent implements OnInit {
-    public usersDataSource: UsersDataSource;
     public usersPermissions = [ 'Owner', 'Developer', 'Editor' ];
 
     public assignContributorForm = new AssignContributorForm(this.formBuilder);
@@ -55,10 +58,9 @@ export class ContributorsPageComponent implements OnInit {
     constructor(
         public readonly appsState: AppsState,
         public readonly contributorsState: ContributorsState,
-        private readonly formBuilder: FormBuilder,
+        public readonly usersDataSource: UsersDataSource,
-        usersService: UsersService
+        private readonly formBuilder: FormBuilder
     ) {
-        this.usersDataSource = new UsersDataSource(usersService, this);
     }
 
     public ngOnInit() {
@@ -93,4 +95,8 @@ export class ContributorsPageComponent implements OnInit {
                 });
         }
     }
+
+    public trackByContributor(index: number, contributor: { contributor: AppContributorDto }) {
+        return contributor.contributor.contributorId;
+    }
 }