Supposons que j'ai un composant qui affichera une propriété name, donc cela se passe à peu près comme ceci:

import {Component, Input} from 'angular2/core';

@Component({
  selector: 'demo',
  template: `<div>{{name}}</div>`,
  styles: [``],
})
export class Demo {
  @Input() name: string;
}

Le problème est, comment pourrais-je afficher [noname] quand quelqu'un utilise ce composant mais ne transmet aucune propriété name?

La seule solution qui me vient à l'esprit est d'utiliser un opérateur logique dans un modèle comme {{ name || '[noname]' }}.

21
jasonslyvia 7 mars 2016 à 11:21

6 réponses

Meilleure réponse

Essayer

@Input() name: string = 'noname';
43
Качалов Тимофей 7 mars 2016 à 08:49

Dans le composant, vous devez initialiser comme:

@Input () name:String='';

Dans le HTML, vous pouvez utiliser:

{{ name ===''?  'empty string': name }}
0
Leopold Joy 1 déc. 2017 à 04:04

avec angular 8 et les paramètres tslint par défaut , votre IDE remarquera:

enter image description here

Il est donc normal d'écrire simplement:

@Input() addclass = '';

Sans "annotation de type".

2
michabbb 1 août 2019 à 15:04

Vous pouvez intercepter @Input() avec un setter et le faire soutenir par un champ privé. Dans setter, vous effectuez une vérification null afin que le champ soit défini uniquement sur une valeur non nulle. En dernier lieu, vous liez votre modèle à un champ privé dans lequel vous avez défini la valeur initiale.

2
dee zg 1 déc. 2017 à 04:11

Je pense que vous pouvez utiliser votre idée d'utiliser le modèle. Ce serait donc:

Dans le composant:

@Input () name:String;

Dans le modèle:

<div>{{ name != '' ? name : '[no name]' }}</div>

Cela vérifierait si le nom est vide et utiliserait «[aucun nom]» ou insérer le nom si le nom est transmis.

0
Sujit Kumar Singh 1 déc. 2017 à 06:50

Voici la bonne solution à cela. (ANGULAIRE 2 à 9)

Solution d'adressage: pour définir une valeur par défaut pour la variable @Input. Si aucune valeur n'est passée à cette variable d'entrée, elle prendra la valeur par défaut.

Exemple:

J'ai une interface objet nommée bike:

export interface bike {
  isBike?: boolean;
  wheels?: number;
  engine?: string;
  engineType?: string;
}

Vous avez créé un composant nommé app-bike où vous devez transmettre les propriétés du vélo avec @input décorator of angular. Mais vous voulez que les propriétés isBike et Wheels aient une valeur par défaut (c'est-à-dire .. isBike: true, roues: 2)

export class BikeComponent implements OnInit {
  private _defaultBike: bike = {
    // default isBike is true
    isBike: true,
    // default wheels  will be 2
    wheels: 2
  };

  @Input() newBike: bike = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newBike )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newBike = { ...this._defaultBike, ...this.newBike };
   //  console.log(this.newBike);
  }
}

Pour un article plus détaillé, reportez-vous à this.

Reportez-vous à la tâche de déstructuration de ici

0
Parth Devloper 13 févr. 2020 à 13:37