Impossibilité d'attribuer un nombre à un objet situé dans un array
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:
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:
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 ;
}
} |