Итак, у меня есть страница, где я буду создавать нового пользователя, и я пытаюсь добавить возможность указать, к какой группе будет принадлежать этот пользователь. Я отметил код как полужирный внутри функции onSubmit, чтобы вы могли видеть его, этот код проверит, какая группа была проверена, и установит членство для этого нового использования. Поэтому, чтобы мое приложение могло знать, какая группа была проверена, я использовал привязку данных в html [(ngModel)]="item.Selected" и пометил этот фрагмент кода как полужирный, чтобы вы могли найти его. Но это не работает и выдает ошибку, которую я прикрепил как скриншот. Спасибо!
<div class="tab">
<h2>Add New User</h2>
<form (ngSubmit)="onSubmit(addNewUserForm)" #addNewUserForm="ngForm" [hidden]="Error!=null">
<mat-card>
<div class="form-group">
<label for="name"><b>Name</b></label>
<div>
<input autocomplete="off" type="text" id="name" required [(ngModel)]="user.name" name="name"
#name="ngModel">
<div [hidden]="name.valid" class="alert alert-danger">Name is required</div>
</div>
</div>
<div class="form-group">
<label for="password"><b>Password</b></label>
<div>
<input type="password" id="password" [(ngModel)]="user.password" name="password"
#password="ngModel">
<div [hidden]="!passwordEmpty(addNewUserForm)" class="alert alert-warning">Blank password is not
recommended</div>
</div>
</div>
<div class="form-group">
<label for="password2"><b>Retype Password</b></label>
<div>
<input type="password" id="password2" [(ngModel)]="user.password2" name="password2"
#password2="ngModel">
<div [hidden]="passMatch(addNewUserForm)" class="alert alert-danger">Password does not match</div>
</div>
</div>
<div class="form-group-groups">
<label><b>Select group</b></label>
</div>
<mat-form-field style="min-width: 290px; margin-left: 1em;">
<mat-select multiple>
**<mat-option *ngFor="let item of items" [(ngModel)]="item.Selected">{{item.Name}}</mat-option>**
</mat-select>
</mat-form-field>
</mat-card>
<mat-card>
<button mat-raised-button class="lspace" [disabled]="!formValid(addNewUserForm)">Add</button>
<button mat-raised-button class="lspace" (click)="onCancel()">Cancel</button>
</mat-card>
</form>
<div>
<p class="error" *ngIf="Error != null">{{Error}}</p>
</div>
</div>
export class UserDetails {
name: string;
password: string;
password2: string;
}
export module Model {
export class GroupItem {
constructor(group: Group) {
this.Name = group.Name;
this.Selected;
}
readonly Name: string;
Selected: boolean;
}
}
@Component({
selector: 'new-user',
templateUrl: './user-new.component.html',
styleUrls: ['./user-new.component.css'],
})
export class NewUserComponent extends BaseComponent implements OnInit {
user: UserDetails;
Groups: Group[];
items: Model.GroupItem[];
constructor(appData: AppData, private userService: UsersService, logonService: LogonService, private location: Location, private groupService: GroupsService) {
super(appData, logonService);
this.user = new UserDetails();
}
protected onToken(token: string): void {
this.fetchGroups(token);
}
private fetchGroups(token: string): void {
this.groupService.getGroups(token).subscribe(
groups => { this.buildItems(groups) },
(err: any) => { this.showError(err) }
);
}
private buildItems(groups: Group[]): void {
this.items = new Array<Model.GroupItem>(groups.length);
for(let i=0; i < groups.length; ++i) {
this.items[i] = new Model.GroupItem(groups[i]);
}
}
ngOnInit() {
super.ngOnInit();
document.getElementById('name').focus();
}
onCancel(): void {
super.ngOnInit();
this.location.back();
}
passMatch(form: NgForm): boolean {
let p1 = (form.value.password == null) ? '' : form.value.password;
let p2 = (form.value.password2 == null) ? '' : form.value.password2;
return (p1 == p2);
}
formValid(form: NgForm): boolean {
return form.valid && this.passMatch(form);
}
passwordEmpty(form: NgForm): boolean {
return (form.value.password == null) || (form.value.password.length == 0);
}
onSubmit(form: NgForm): void {
if (this.Token == null || this.Token == '') {
console.error('Token is not valid.');
return;
}
**var groups: string[] = this.items.filter(itm => itm.Selected).map(itm => itm.Name);
this.userService.setMembership(this.Token, this.user.name, groups).subscribe(
() => { this.location.back(); this.appData.setDirty(); },
(err: any) => { this.showError(err) }
);**
//
let pass = (this.user.password == '') ? null : this.user.password;
this.userService.addUser(this.Token, this.user.name, pass).subscribe(
(_: string) => { this.location.back(); this.appData.setDirty(); },
(err: any) => { this.showError(err); }
);
}
}
Мое приложение с ошибкой, которую я получаю