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 JSON : Sélectionner tout - Visualiser dans une fenêtre à part
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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<app-navbar></app-navbar>
 
<div class="container">
  <app-tasks></app-tasks>
</div>

mon fichier app.module.ts

Code TypeScript : Sélectionner tout - Visualiser dans une fenêtre à part
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 TypeScript : Sélectionner tout - Visualiser dans une fenêtre à part
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");
  } 
}