在 Angular2 Modal 上显示异步值

Question

我会先说我对 Angular2 很陌生。我正在尝试在模式上显示异步数据，模式在变量更新之前呈现。我希望看到我的变量显示。

变量是winnername & winnerurl，主题代码在.ts和.html sn-ps的底部。

提前感谢您的任何意见。

import { Component, ViewChild, OnInit } from '@angular/core';
import { FormsModule } from "@angular/forms"; 
import { findfriendService } from '../findfriend.service'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  providers: [ findfriendService ]
})

export class SearchComponent implements OnInit {


@ViewChild('myModal') modal: any; 

constructor(private _findfriendService: findfriendService) { }
 
//Submit form
onSubmit(f){
console.log("from click: ", f);

  //post form data to MongoDB
  this._findfriendService.postFriend(f);

  //get all current friends from Mongo DB 
  this._findfriendService.getFriends()
  .subscribe(allFriends =>{
  
      { CODE REMOVED FOR EASE OF VIEWING }
      
      // Code resulting value being assigned to variable index
     for(var a=0;a<plyrsDiff.length;a++){
       var b = plyrsDiff[a];
       if(plyrsDiff[a]<c){
         c = b; 
         index = b; 
       }
    }
    //CONSOLE LOG DISPLAYS VALUES CORRECTLY
    winnername = allFriends[index].firstName;
    winnerurl = allFriends[index].url;
    this.modal.open(); 

  })
}

<div class="container">
    <div class="jumbotron">

    <!--**** Begin of Form  ***********************************-->
    <!--Form variable #f declared -->
    <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
        <div class="form-group">
            <!--Enter First Name-->
            <label 
                for="firstName">First Name.
            </label>
            <input 
                ngModel name="firstName" 
                #firstName="ngModel"
                class="form-control"
                required
                minlength="3">
                <!-- Show Error if invalid -->
                <div 
                    *ngIf="firstName.touched && firstName.errors">
                    <div 
                        class="alert alert-danger"
                        *ngIf="firstName.errors.required">
                        First name is required
                    </div>
                </div>
           

            <!-- Loop generates 10 user questions-->
                <div  
                    *ngFor="let question of questions; let in = index"> 
                <h5>
                    {{question.q}}
                </h5>
                <!-- display questions, generate select options, assign variable unique to question for ngModel - name - id-->
                <select 
                    required 
                    [(ngModel)]=numbers[in] 
                    name={{question.id}} 
                    id={{question.id}}>  
                    <option   
                        *ngFor="let choice of choices" 
                        [ngValue]="choice">{{choice.label}}
                    </option> 
                </select>
            </div>

     
            <button  
                [disabled]="!f.form.valid" 
                type="submit" 
                class="btn btn-danger btn-lg">Submit
            </button>
        </div>
        
         <modal #myModal>
            <modal-header>
                <h1>ALERT</h1>
            </modal-header>
            <modal-content>
            
                <img  src="{{winnerurl}}" height="160">
            </modal-content>
            <modal-footer>
                <button class="btn btn-primary" (click)="myModal.close()">close</button>
            </modal-footer>
        </modal>
    </form>
     
</div>
</div> 

Answer 1

由于您订阅了._findfriendService.getFriends()，因此您无法在模板中使用异步管道，因为您已经在获取数据。您需要检查winnerurl 或winnername 是否不为空，然后您可以显示模态。尝试将*ngIf 像这样放在您的模态中

<modal #myModal *ngIf="winnerurl">
        <modal-header>
            <h1>ALERT</h1>
        </modal-header>
        <modal-content>

            <img  src="{{winnerurl}}" height="160">
        </modal-content>
        <modal-footer>
            <button class="btn btn-primary" (click)="myModal.close()">close</button>
        </modal-footer>
    </modal>

希望这会有所帮助。

Answer 2

可以在 Stack Overflow 上的类似问题中找到答案。

Wait for Angular 2 to load/resolve model before rendering view/template