Valeur de mon champs non prise en compte
Bonsoir,
J'ai deux petit problème le premier est au niveau de mon css, ou je ne vois pas trop ou est le soucis certainement avec bootstrap, ma list group est décaler ? voici l'adresse ou je fais mes test : http://51.77.245.214:4200/
deuxième problème, au niveau de mes données il ne prend pas la la valeur qui est à "false" mes affiche bien la valeur de mes champs label comme vous pouvez le constater.
db.json
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| [
{
"id": 1,
"label": "Learn Angular",
"completed": false
},
{
"id": 2,
"label": "Learn Spring boot",
"completed": false
}
] |
mon fichier index.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tasks</title>
<base href="/">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html> |
mon fichier navbar.component.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <nav class="navbar navbar-expand-sm navbar-dark bg-success">
<a class="navbar-brand" href="#">Tasks</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav> |
mon fichier tasks.component.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <div class="row my-4">
<div class="col-md-6">
<h3>List of Tasks</h3>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-dark btn-sm">
<i class="fa fa-plus"></i> New Task
</button>
</div>
</div>
<div class="row">
<div class="col-md-6 mx auto">
<div class="form-group">
<label for="label">label</label>
<input id="label" type="text" class="form-control">
</div>
<div class="form-check my-2">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" >
Completed
</label>
</div>
<button class="btn btn-success btn-block">
<i class="fa fa-send"></i> New Task
</button>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<ul class="list-group">
<li *ngFor="let task of tasks" class="list-group-item d-flex justify-content-between align-items-center">
{{ task.label }}
<span class="badge badge-secondary badge-pill">
{{ task.Completed }}
</span>
</li>
</ul>
</div>
</div> |
mon fichier app.component.html
Code:
1
2
3
4
5
| <app-navbar></app-navbar>
<div class="container">
<app-tasks></app-tasks>
</div> |
mon fichier app.module.ts
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { TasksComponent } from './components/tasks/tasks.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
TasksComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } |
mon fichier task.service.ts
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Task } from '../models/task';
@Injectable({
providedIn: 'root'
})
export class TaskService {
constructor(private http: HttpClient) { }
findAll() {
return this.http.get<Task[] >("http://51.77.245.214:3000/tasks");
}
} |
