<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<table id="usersstable" class="table table-bordered table-striped table-hover ">
<thead class="bg-warning">
<tr>
<th scope="col">username</th>
<th scope="col">password</th>
<th scope="col">isactive</th>
<th scope="col">photopath</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<!-- <td><input type="checkbox" [checked]=user.isactive disabled /></td> -->
<td *ngIf="user.isactive; else elseBlock">
<i class="fa fa-check-square" ></i>
</td>
<ng-template #elseBlock>
<td>
<i class="fa fa-square"></i>
</td>
</ng-template>
<td><img class="img rounded-circle" [src]=user.photopath /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
** component ts
import { Component, OnInit } from "@angular/core";
import { User } from "../models/User";
import { UserService } from "../services/user.service";
@Component({
selector: "app-user-list",
templateUrl: "./user-list.component.html",
styleUrls: ["./user-list.component.css"],
providers: [UserService],
})
export class UserListComponent implements OnInit {
users = new Array<User>();
constructor(userService: UserService) {
userService.getUsers().subscribe(response => {
this.users = response;
});
}
ngOnInit(): void {
}
}
** component css
div {
margin-top: 0.5px;
}
tr {
text-align: center;
align-items: center;
vertical-align: middle;
height: 55px;
}
td>img {
width: 50px;
}
.fa-check-square {
color: rgb(49, 241, 32);
font-size: 1.3em;
}
.fa-square {
color: rgb(199, 195, 197);
font-size: 1.3em;
}
** user service.ts
export const environment = {
production: false,
apiBaseURI :"https://localhost:44393/api/Users"
};
import { HttpClient, HttpParams } from "@angular/common/http";
import { HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { catchError } from "rxjs/operators";
import { Injectable } from "@angular/core";
import { User } from "../models/User";
import { HttpErrorHandler, HandleError } from "../services/http-error-handler.service";
const httpOptions = {
headers: new HttpHeaders({
"Content-Type": "application/json",
})
};
@Injectable({
providedIn: "root"
})
export class UserService {
private handleError: HandleError;
constructor(private http: HttpClient,
httpErrorHandler: HttpErrorHandler) {
this.handleError = httpErrorHandler.createHandleError("UserService");
}
public getUsers(): Observable<User[]> {
return this.http.get<User[]>(environment.apiBaseURI);
}
public addUser(user: User): Observable<User> {
return this.http.post<User>(environment.apiBaseURI, user,httpOptions)
.pipe(
catchError(this.handleError("addUser", user))
);
}
Yorumlar
Yorum Gönder