Valeur de mon champs non prise en compte

**cdevl37** · 23/03/2020, 23h05

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

**krakatoa** · 24/03/2020, 00h08

* dans le html il y a de l'auto qui centre le div... voir avec "mxauto"

* soit plus précis dans tes questions, qu'on ne passe pas 10min a chercher
ou? sur ce code là ? {{ task.Completed }}

un petit test

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
{{task|json}}

utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div *ngIf=" task.Completed">true</div>

**cdevl37** · 24/03/2020, 00h32

Envoyé par krakatoa

* dans le html il y a de l'auto qui centre le div... voir avec "mxauto"

* soit plus précis dans tes questions, qu'on ne passe pas 10min a chercher
ou? sur ce code là ? {{ task.Completed }}

un petit test

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
{{task|json}}

utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div *ngIf=" task.Completed">true</div>

Merci à vous pour votre réponse en effet un petit oubli avec mxauto

en ce qui concerne task.Completed c'est une minuscule à completed

encore merci pour votre aide

Valeur de mon champs non prise en compte

Angular

Vue hybride

Discussions similaires

Partager

Partager