Angular Typescript keeps setting my variable to undefined outside the observable

Question

All I want is to read image file urls from my Initialization to show on my presentation. However, as soon as the assigned variable leaves the operator, it reverts to undefined.

I tried looking up Promise(), but I couldn't understand it on the spot.

    public apiURL = environment.api; 
    public isImageLoading:any;
    public adverts:any;
    public imageToLoad:any=[];
      constructor(private http:HttpClient,private lservice:LoginService, private snack:MatSnackBar,private registeredUserService:RegisteredUserService) { }

      ngOnInit() {
        this.lservice.fullName;
        this.registeredUserService.GetAllAdverts().subscribe(val=>
          {
            this.adverts=val;
            let numOfAds=0;
            for(let a of this.adverts)
            {
              this.imageToLoad[numOfAds]={url:this.apiURL+'/api/Images/'+a.advertID+'_1'};
              numOfAds++;
            }
            console.log(this.imageToLoad);//Shows what it should
          });
   console.log(this.imageToLoad);//reverts to undefined
      }
    }

HTML

<div *ngFor="let a of adverts; let i of imageToLoad">
    <mat-card class="example-card">
        <mat-card-header>
          <mat-card-title>{{a.vehicleMake}} | {{a.vehicleModel}} ({{a.vehicleYear}}) -- R{{a.sellingPrice}}</mat-card-title>
          <mat-card-subtitle>{{a.location}}</mat-card-subtitle>
        </mat-card-header>

        <img  mat-card-image src="{{i.url}}" alt="Photo unavailable">

        <mat-card-actions>
          <mat-card-subtitle>{{a.advertDescription}}</mat-card-subtitle>
          <button mat-button>LIKE</button>
          <button mat-button>SHARE</button>
        </mat-card-actions>
      </mat-card>
    </div>

`.GetAllAdverts().subscribe(` is asynchronous. Your lower `console.log` runs before `GetAllAdverts` returns a response. — Cerbrus, Oct 07 '19 at 07:44
@Cerbrus is right, it should work. Put the `imageToLoad` in your html `{{imageToLoad}}` and you'll see its there — Jeanluca Scaljeri, Oct 07 '19 at 07:50
should work, but no cigar. I added an html just in case I missed something — MrTheBarintokyo, Oct 07 '19 at 07:58
I don't think you can do this `let a of adverts; let i of imageToLoad` You have some kind of double loop there. Or I did miss something or try to rewrite that and see what happens — Jeanluca Scaljeri, Oct 07 '19 at 08:14
you were right. I added a let i = index at the ngfor and changed the image tag to works now :) — MrTheBarintokyo, Oct 07 '19 at 08:21

Angular Typescript keeps setting my variable to undefined outside the observable

0 Answers0