J'essaie d'utiliser le composant ng-multiselect-dropdown dans un autre composant / page (à savoir enregistré via RouterModule.forRoot dans app.mudule.ts). Je l'ai importé dans mon composant comme suggéré dans ce lien -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ng-multiselect-dropdown [placeholder]="'custom placeholder'"
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
</body>
</html>
Mais j'obtiens les erreurs suivantes, lorsque je regarde dans les outils de développement du navigateur. erreurs d'analyse de l'emplacement: Impossible de se lier à 'placeholder' car ce n'est pas une propriété connue de 'ng-multiselect-dropdown'. 1. Si 'placeholder' est une directive angulaire, ajoutez 'CommonModule' au '@ NgModule.imports' de ce composant. 2. Pour autoriser n'importe quelle propriété, ajoutez «NO_ERRORS_SCHEMA» au «@ NgModule.schemas» de ce composant. Impossible de se lier à 'data' car ce n'est pas une propriété connue de 'ng-multiselect-dropdown'. Impossible de se lier à 'settings' car ce n'est pas une propriété connue de 'ng-multiselect-dropdown'.
Le html de la page est comme ci-dessous -
import { Component, OnInit, NgModule, NO_ERRORS_SCHEMA } from
'@angular/core';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { FormsModule } from '@angular/forms';
@Component({
selector: "ng-multiselect-dropdown",
templateUrl: "./multiselect.component.html"
})
@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot(),
FormsModule
],
schemas: [NO_ERRORS_SCHEMA]
})
export class MultiSelectComponent implements OnInit {
//constructor(private activatedRoute: ActivatedRoute,
// private router: Router,
// private http: HttpClient,
// @Inject('BASE_URL') private baseUrl: string) {}
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit() {
this.dropdownList = [
{ item_id: 1, item_text: 'Mumbai' },
{ item_id: 2, item_text: 'Bangaluru' },
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' },
{ item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
{ item_id: 3, item_text: 'Pune' },
{ item_id: 4, item_text: 'Navsari' }
];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};
}
onItemSelect(item: any) {
console.log(item);
}
onSelectAll(items: any) {
console.log(items);
}
}
3 Réponses :
Cette erreur signifie que le module du composant n'a pas les importations requises. Essayez d'importer le module dans le fichier de module de ce composant.
Juste pour vous assurer que ce n'est pas un problème avec une importation incorrecte, supprimez le [placeholder] = "'custom placeholder'" et vérifiez si la valeur par défaut Select est affichée.
Ce n'est pas seulement un espace réservé, il montre la même erreur pour d'autres propriétés comme les données, les paramètres, etc. Il devrait y avoir quelque chose qui ne va pas avec l'importation, je pense.
Au lieu de
[value]="custom placeholder"
utilisez
[placeholder]="'custom placeholder'"
Et bien sûr, vérifiez que l'importation dans le module se fait correctement p >
Cependant, j'ai vérifié la documentation officielle et vous pouvez lier la propriété d'espace réservé
Maintenant, il affiche "Impossible de se lier à 'valeur' car ce n'est pas une propriété connue de 'ng-multiselect-dropdown'
C'est faux, si vous sautez le 'alors angular essaiera d'évaluer le "espace réservé personnalisé" comme une expression en espérant que la classe MultiSelectComponent ait une propriété avec ce nom. De plus, le ng-multiselect-dropdown n'a pas de propriété nommée "valeur"
Oui d'accord, j'essayais juste sur mon mac, le sélecteur multidirectionnel en général n'a pas de valeur et d'espace réservé
Finalement, il a fonctionné. Le module NgMultiSelectDropDownModule lui-même doit être imorté vers app.module.ts. La méthode ngOnInit () doit être utilisée dans le component.ts. Comme d'autres l'ont correctement souligné, le sélecteur du composant doit être différent du sélecteur ng-multiselect-dropdown utilisé dans le code HTML du composant.
Je pense que vous pouvez trouver votre réponse ici lien
J'ai essayé le lien ci-dessus, où je reçois une erreur
Il semble erroné que vous ayez défini votre propre sélecteur comme "ng-multiselect-dropdown", ce qui le fait "remplacer" celui importé. Essayez de le renommer par exemple
@Component ({selector: "my-dropdown", templateUrl: "./multiselect.component.html"})Alors, dois-je simplement supprimer la ligne - selector: "ng-multiselect-dropdown"?
Que se passe-t-il si vous le renommez simplement? Il semble que vous essayez de créer votre propre composant angulaire, vous aurez donc probablement besoin d'un sélecteur (avec votre propre nom défini)
J'ai essayé de supprimer et de renommer le sélecteur, mais l'erreur reste la même. Est-ce que je l'importe correctement?
Peut-être une question stupide, mais l'avez-vous correctement ajoutée? vous savez - npm install ...
Oui, je les ai ajoutés.