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"); } }
Partager