1. 4

    Vous pouvez utiliser le *ngIf directive de contrôler l'INTERFACE de rendu de la logique , et d'utiliser les variables d'état pour le contrôle de l'achèvement de la demande.
    En voici un échantillon.

    sur votre composant 

            private loadingComplete = false;
        private isLoading = true ;
        private error;
        private media[];
        constructor(private mediaService:MediaService) {
            this.mediaService.getMedia()
                             .subscribe(
                                res =>{
                                    this.media = res;
                                    this.isLoading = false;
                                    this.loadingComplete = true;
                                },
                                err => {
                                    this.loadingComplete = true;
                                    this.error = err;
                                });
                        }

                isEmptyResult(){
                    //N.B assuming ther server returns empty array if no media found.
                    return (!this.isLoading && !this.error && this.loadingComplete && this.media && this.media.length===0);
                }
                mediaAvailable(){
                    return (!this.isLoading && !this.error && this.loadingComplete && this.media && this.media.length>0);
                }

    sur votre modèle 

     <div class="col-md-2 mediaContainer">
  Media:

    <li *ngIf="isLoading">
        <loaders-css [loader]="'square-spin'" [loaderClass]="'my-loader'">
        </loaders-css>
    </li>

    <p *ngIf='error'>
        Network Error.
    </p>   

    <p *ngIf='isEmptyResult()>
        No media found.
    </p>

    <ul *ngIf="mediaAvailable()" class="media" >
        <li *ngFor="let medium of media"
            [class.selected] = "medium === selectedMedium"
            (click)="onSelect(medium)">
        {{medium.name}}
        </li>
    </ul>
</div>
    • Merci @Mehari! Qui a travaillé parfait, m'a sauvé jours sans doute, et je suis sûr que ça va aider beaucoup d'autres. Aussi, je pense que cela me rappelle que je devrais mettre autant de logique dans les composants eux-mêmes que possible.
    • heureux je l'ai aidé.
    • J'ai la même situation que ci-dessus et j'ai mis en œuvre et il fonctionne très bien. Si j'ai des résultats vides ce qui est la condition que je dois donner?@Mehari
    • pourquoi utiliser asynchrone dans le modèle si vous vous inscrivez dans le contrôleur?.. est-ce vraiment nécessaire?
    • vous droit, mis à jour en conséquence. L'intention était de clarifier les choses pour la question d'origine d'où il utilise async pipe.
    • si vous avez beaucoup de ng-si . , essayez de les envelopper dans gn-conteneur pour optimiser la vitesse et les dom

    InformationsquelleAutor Mehari
  2. 3

    J'ai essayé de montrer spinner jusqu'des données sont disponibles.

    S'il vous plaît examiner les éléments suivants plunker.

    https://plnkr.co/edit/4kSximI2a2l6SWVzqsyl?p=preview

    Code concerné:-

    HTML:

      <ul  >
       <div class="loader" [hidden]="myVar"></div>
        <li *ngFor="let medium of media "

        (click)="onSelect(medium)">
       {{medium.name}}
    </li>
 </ul>

    CSS:-

    /* Styles rendez-vous ici */

           .loader {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

       @keyframes spin {
          0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
       }

    Contrôleur

              import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
export class Media {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
<div class="col-md-2 mediaContainer">
Media: 
<ul  >
<div class="loader" [hidden]="myVar"></div>
<li *ngFor="let medium of media "
(click)="onSelect(medium)">
{{medium.name}}
</li>
</ul>
</div>
`,
})
export class App {
name:string;
myVar: boolean;
media: Media[];
constructor() {
this.name = 'Angular2';
setTimeout(() => {
this.title = "Brave New World";
this.myVar = true;
this.media  =  [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
}, 2000);)
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}

    S'il vous plaît laissez-moi savoir dans le cas d'une requête .

    • S'il vous plaît laissez-moi savoir dans le cas d'une requête
    • Downvoted parce que: 1. L'async pipe est pour des Observables. Vous n'avez pas utilisé un. 2. Vous n'avez pas utilisé l' @Composante décorateur. 3. Votre "externe", le CSS et le HTML sont inutiles. Vous ne déclarez pas le CSS dans le composant et le HTML est incorporé. 4. Vous disposez d'une composante Médias mais a déclaré une Application composant. 5. myVar pour un drapeau? 6. L'Indentation est important.
    InformationsquelleAutor Abhishek Srivastava