我是Angular的新手，并尝试使用[(ngModel)]进行双向数据绑定。但是我收到消息“ [Angular]标识符'usuario'未定义。'NgModel'不包含此类成员”，并且数据未绑定。
使用表格中的和编辑按钮打开模态，我想填写模态的字段。
我导入了FormsModule和ReactiveFormsModule。所以我不知道怎么了。
user.component.html
<p *ngIf="!usuarios"><em>Cargando...</em></p>
<div class="container-main">
<table class="table table-striped animated fadeIn fast">
<thead>
<tr>
<th>Usuario</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Teléfono</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios">
<td>{{usuario.usuario}}</td>
<td>{{usuario.nombre}}</td>
<td>{{usuario.apellido}}</td>
<td>{{usuario.telefono}}</td>
<td>{{usuario.email}}</td>
<td>
<button type="button" class="btn btn-info" (click)="editUser(UserModal, usuario)">
<span class="glyphicon glyphicon-cog" aria-hidden="true" ></span>
</button>
<button type="button" class="btn btn-danger" (click)="deleteUser(usuario.usuario_id)">
<span class="glyphicon glyphicon-trash" aria-hidden="true" ></span>
</button>
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-success navbar-btn pull-right" (click)="newUser(UserModal)"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Nuevo Usuario</button>
</div>
<ng-template #UserModal>
<div class="modal-header">
<h4 class="modal-title pull-left">
Datos de Usuario
</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalUser.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #forma="ngForm" ngNativeValidate (ngSubmit)="saveUser(forma)" style="padding-top: 1em; padding-bottom: 1em">
<div class="form-group">
<label>Usuario</label>
<!-- <input #User type="text" required [value]="usuario.usuario ? usuario.usuario : null" class="form-control" aria-describedby="basic-addon3" placeholder="usuario"> -->
<input class="form-control" required placeholder="Ingrese un usuario" type="text" name="usuario" [(ngModel)]="usuario.usuario" #usuario="ngModel">
<!-- <div *ngIf="usuario.errors?.required">
Requerido
</div> -->
<!-- <div [hidden]="nombre.valid || nombre.pristine" class="alert alert-danger">
Requerido
</div> -->
</div>
<div class="form-group">
<label>Nombre</label>
<!-- <input #UserName type="text" required [value]="usuario.nombre ? usuario.nombre : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un nombre"> -->
<input class="form-control" required placeholder="Ingrese un nombre" type="text" name="nombre" [(ngModel)]="usuario.nombre" #nombre="ngModel">
<!-- <div *ngIf="nombre.errors?.required">
Requerido
</div> -->
</div>
<div class="form-group">
<label>Apellido</label>
<!-- <input #UserlastName type="text" required [value]="usuario.apellido ? usuario.apellido : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un apellido"> -->
<input class="form-control" required placeholder="Ingrese un apellido" type="text" name="apellido" [(ngModel)]="usuario.apellido" #apellido="ngModel">
<!-- <div *ngIf="apellido.errors?.required">
Requerido
</div> -->
</div>
<div class="form-group">
<label>Documento</label>
<!-- <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)"> -->
<input class="form-control" required placeholder="Ingrese un documento" type="number" name="documento" [(ngModel)]="usuario.documento" #documento="ngModel">
<!-- <div *ngIf="telefono.errors?.required">
Requerido
</div> -->
</div>
<div class="form-group">
<label>Teléfono</label>
<!-- <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)"> -->
<input class="form-control" required placeholder="Ingrese un teléfono" type="text" name="telefono" [(ngModel)]="usuario.telefono" #telefono="ngModel">
<!-- <div *ngIf="telefono.errors?.required">
Requerido
</div> -->
</div>
<div class="form-group">
<label>Email</label>
<!-- <input #UserEmail type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [value]="usuario.email ? usuario.email : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un correo"> -->
<input class="form-control" required placeholder="Ingrese un correo electrónico" type="email" name="email" [(ngModel)]="usuario.email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" #email="ngModel">
<!-- <div *ngIf="email.errors?.required">
Requerido
</div> -->
<div *ngIf="email.errors?.pattern">
Formato de email incorrecto
</div>
</div>
<div class="form-group">
<label>Password</label>
<!-- <input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)"> -->
<input class="form-control" id="password" required placeholder="Ingrese un password" type="password" name="password" [(ngModel)]="usuario.password" #password="ngModel">
<!-- <div *ngIf="telefono.errors?.required">
Requerido
</div> -->
</div>
<!-- <div class="form-group">
<label>Password</label>
<input #UserTelephone type="number" required [value]="usuario.telefono ? usuario.telefono : null" class="form-control" aria-describedby="basic-addon3" placeholder="Ingrese un teléfono (solo números)">
<input class="form-control" id="confirm_password" required placeholder="Ingrese el mismo password" type="password">
</div> -->
<button type="submit" [disabled]="!forma.form.valid" class="btn btn-primary mr-auto">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Guardar
</button>
</form>
<div class="modal-footer">
Usuario
</div>
</div>
</ng-template>
user.component.ts
import {Component, OnInit, Inject, TemplateRef, ElementRef } from "@angular/core";
import {HttpClient, HttpHeaders, HttpRequest, HttpEventType, HttpResponse} from "@angular/common/http";
import { ActivatedRoute } from "@angular/router";
import { Http, Headers, RequestOptions } from "@angular/http";
import { BsModalService } from "ngx-bootstrap/modal";
import { BsModalRef } from "ngx-bootstrap/modal/bs-modal-ref.service";
import { NgForm } from "@angular/forms";
@Component({
selector: "app-users",
templateUrl: "./users.component.html"
})
export class UsersComponent implements OnInit {
// **** Ventanas Modales ****
modalRef: BsModalRef;
modalRefAlert: BsModalRef;
modalUser: BsModalRef;
public baseUrl: string;
public http: HttpClient;
public headers: Headers;
public options: RequestOptions;
public usuarios: User[];
public usuario: User;
public message: string;
public title: string;
public nuevo:boolean = true;
constructor(
private route: ActivatedRoute, http: HttpClient, @Inject("BASE_URL") baseUrl: string, private modalService: BsModalService) {
this.baseUrl = baseUrl;
this.http = http;
let headers = new Headers({
"Content-Type": "application/x-www-form-urlencoded"
});
let options = new RequestOptions({ headers: headers });
}
ngOnInit() {
this.loadUsers();
}
loadUsers() {
//Aca se llama a la api para obtener todos los usuarios...
this.http
.get<User[]>(this.baseUrl + "api/Users/GetAllUsers")
.subscribe(result => {
this.usuarios = result;
console.log(this.usuarios);
});
}
// Abre una ventana modal que muestra el error personalizado
openModalAlert(template: TemplateRef<any>, ttl: string, msg: string) {
this.message = msg;
this.title = ttl == "" ? "Alerta" : ttl;
this.modalRefAlert = this.modalService.show(template, { class: "second" });
}
// Elimina un usuario
deleteUser(_idns_user: number) {
if (confirm("Está seguro que quiere eliminar el usuario?")) {
//Aca se llama a la api para obtener todos los usuarios...
this.http
.get<boolean>(
this.baseUrl + "api/Users/DeleteUser?iduser=" + _idns_user
)
.subscribe(result => {
console.log(result);
alert("Se ha eliminado correctamente el usuario" + _idns_user);
});
} else {
// Do nothing!
}
}
// Abre la ventana modal que muestra las propiedades de la carpeta
editUser(template: TemplateRef<any>, usuario: User) {
//marca de edicion de usuario
this.nuevo = false;
this.usuario = usuario;
template.elementRef
console.log(this.usuario );
this.modalUser = this.modalService.show(template);
}
// Abre la ventana modal que muestra las propiedades de la carpeta
newUser(template: TemplateRef<any>) {
this.nuevo = true;
this.usuario = null;
this.modalUser = this.modalService.show(template);
}
saveUser(forma: NgForm) {
// this.usuario.usuario = user;
// this.usuario.nombre = username;
// this.usuario.apellido = lastname;
// this.usuario.telefono = telephone.toString();
// this.usuario.email = email;
console.log("Formulario posteado");
console.log("ngForm" , forma);
console.log("valor forma", forma.value);
console.log("Usuario", this.usuario);
this.usuario = forma.value;
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
let url;
console.log(this.nuevo)
if (this.nuevo){
url = this.baseUrl + 'api/Users/InsertUser';
}else{
url = this.baseUrl + 'api/Users/UpdateUser';
}
console.log(this.usuario);
this.http.post<User>(url, this.usuario, httpOptions).subscribe
(
res => {
console.log(res);
//this.openModalAlert(this.ventanaModal,"Exito!","Se creo su nuevo atributo con exito!");
}
,
error => {
//this.openModalAlert(this.ventanaModal,"Error!",JSON.stringify(error));
console.error(error)
}
);
}
}
class User {
usuario_id: number;
usuario: string;
password: string;
nombre: string;
apellido: string;
telefono: string;
email: string;
documento: number;
alta_fecha: Date;
// familias : family[];
}
答案 0 :(得分：0)
这是因为您的usuario还不存在。
试试这个：
<div class="modal-body" *ngIf="usuario">
如果usuario为：null或undefined，这将确保在该元素下不生成任何内容
答案 1 :(得分：0)
天哪，错误在表单组中，输入用户是：
句子[value] =“ usuario.usuario”产生的冲突没有错误。