Discussion :

[Goosh]

Bonjour, je viens de commencer avec angular et je cherche simplement à déclarer que j'attends un nombre et non pas une chaîne de caractère dans un objet situé dans un tableau et je n'y arrive pas, je ne comprends pas ce qui cloche... Quand je déclare un nombre à la clés loveIts (comme ça => loveIts: 3) ça plante... Voila le message que j'ai

Error: src/app/app.component.html:28:10 - error TS2322: Type 'string | number' is not assignable to type 'string'.
  Type 'number' is not assignable to type 'string'.

28         [postLoveIts]="post.loveIts"
            ~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.

Voici mon code:

app.component

Code :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
 
export class AppComponent {
 
  posts = [
    {
        title: "First Post",  
        content: "StringString1String1String1String1",  
        loveIts: "3",  
        created: new Date()
    },
    { 
      title: "Second post",  
      content: "String2String2String2String2",  
      loveIts: "6",  
      created: new Date()
    },
    {  
      title: "Third Post",  
      content: "String3String3String3String3String3",  
      loveIts: "18",  
      created: new Date()
    },
  ];
 
  /*
  isAuth = false;
 
  lastUpdate: Promise<Date> = new Promise(
    (resolve, reject) => {
      const date = new Date();
      setTimeout(
        () => {
          resolve(date);
        }, 2000
      );
    }
  );
  appareils = [
    {
      name:'Machine à laver',
      status: 'allumé'
    },
    {
      name:'Télévision',
      status: 'allumé'
    },
    {
      name:'Ordinateur',
      status: 'éteint'
    },
  ];
 
  constructor() {
    setTimeout(
      () => {
        this.isAuth = true;
      }, 4000
    );
  }
  onAllumer() {
    console.log('On allume tout');   
  }
}

et post-list.component (je ne pense pas que ça soit utile pour cette première question), je voudrais simplement ajouter un compteur de like, savez-vous comment je peux récupérer le loveIts qui se trouve dans mon tableau sur app.component pour pouvoir l'incrémenter dans une fonction post-like-component ?
Du coup, ça fait deux questions (je suis un peu gourmand), je sais pas si il faut que j'ouvre une deuxième discussion... J'espère être clair... Merci pour votre aide !!

Code :

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
 import { Component, Input, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
 
  @Input() postTitle = 'String';
  @Input() postContent = 'String';
  @Input() postLoveIts = 'Number';
  @Input() postCreated = new Date;
 
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
  addOne() {
    let postLoveIts = this.postLoveIts ;
 
  }
}

[darkstar123456]

Bonjour,

L'erreur écrit [postLoveIts]="post.loveIts".
Est-ce un soucis d'affichage de l'erreur ? Car ça devrait plutôt être [postLoveIts] = post.loveIts.

De plus, on peut lire que postLoveIts est défini en tant que number (@Input() postLoveIts = 'Number';); or il est écrit en tant que string => loveIts: "6",.
Pour qu'il soit un nombre, il faudrait retirer les double quotes => loveIts: 6,.

[Goosh]

[postLoveIts]="post.loveIts" fait référence à ce qu'il y a dans app.component.html

Code :

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
 
 
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Mes posts</h2>
      <ul class="list-group">
        <app-post-list *ngFor="let post of posts"
        [postTitle]="post.title"
        [postContent]="post.content"
        [postLoveIts]="post.loveIts"
        [postCreated]="post.created"
        ></app-post-list>
      </ul>
    </div>
  </div>
</div>

J'ai essayé dans tous les sens d'écrire dans app.component.ts d'écrire loveIts = 6 et dans mon post-list-component.ts d'avoir @Input() postLoveIts = 'number'; ou @Input() postLoveIts = number; mais ça ne marche pas... Je ne maîtrise pas typeScript (d'ailleur je ne maîtrise rien lol...)