How to extract values from *ngFor in Angular 8

Question

I am showing some data using *ngFor I want to extract some value from *ngFor and show it for example in my heading. I tried to use {{ project }} but, it did not work. Every time it returned undefined but I am getting data inside ngOnInit()

My HTML looks like:

<div *ngIf="show; else noproject" class="container">
    <h1 class="mb-3 text-primary">Virtual machines for {{vms[project]}}</h1> 
    <button (click)="navigateToDetails(pid)" class="btn btn-success btn-sm mr-2"><i
        class="fas fa-plus-circle"></i>&nbsp;Add VM</button>
        <button (click)="navigateToDetails(pid)" class="btn btn-primary btn-sm mr-2"><i
          class="fas fa-plus-circle"></i>&nbsp;Commit Changes</button>
    <table class="table text-center table-hover table-striped">
      <thead appBtnd class="bg-primary text-white">
        <th appBtn [sortKey]="'name'" [data]="vms">VM Name</th>
        <th appBtn [sortKey]="'ipAddress'" [data]="vms">IP Address</th>
        <th appBtn [sortNumber]="'diskSize'" [data]="vms">Disk Size</th>
        <th appBtn [sortNumber]="'cpu'" [data]="vms">CPU</th>
        <th appBtn [sortNumber]="'ram'" [data]="vms">Ram</th>          
        <th>Gateway</th>
        <th>NetMask</th>
        <th>Actions</th>
      </thead>
      <tbody>
        <tr *ngFor="let vm of vms">
          <td>{{vm.name | titlecase }}</td>
          <td>{{vm.ipAddress}}</td>
          <td>{{vm.diskSize}}</td>
          <td>{{vm.cpu}}</td>
          <td>{{vm.ram}}</td>            
          <td>{{vm.gateway}}</td>
          <td>{{vm.netmask}}</td>
          <td>
            <button class="btn btn-sm btn-danger" type="submit" (click)="deleteVm(vm.id)">
              <i class="fas fa-trash"></i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Angular code:

export class VmForProjectComponent implements OnInit {
        vms: ProjectForUser show: boolean; pid: number; constructor(private alertify: AlertifyService, private route: ActivatedRoute, private vmService: VmService, private projectService: ProjectService, private router: Router) { } 
        ngOnInit() { 
            const projectId = +this.route.snapshot.paramMap.get('projectId'); 
            this.projectService.getVmByProjectId(projectId).subscribe(p => this.vms = p);
             if (this.vms !== null || undefined) { this.show = true; } 
        }

@ChanakaWeerasinghe @AdritaSharma `"id":18, "name":"batmanvm03", "ipAddress":"185.22.98.15", "diskSize":7000, "cpu":8, "ram":2048, "imageUrl":"qemu+ssh://ubuntu@10.19.2.101/system ", "role":"Other", "status":"Pending"` — Arzu Suleymanov, Dec 18 '19 at 09:15
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Christian Vincenzo Traina, Dec 18 '19 at 10:14
@ArzuSuleymanov where is a project property in below object: "id":18, "name":"batmanvm03", "ipAddress":"185.22.98.15", "diskSize":7000, "cpu":8, "ram":2048, "imageUrl":"qemu+ssh://ubuntu@10.19.2.101/system ", "role":"Other", "status":"Pending" You're expecting which is not defined in the object. — tutorialfeed, Dec 18 '19 at 10:57
`[{"id":11,"name":"kubernetesvm","ipAddress":"192.168.1.1","diskSize":12,"cpu":12,"ram":12,"imageUrl":"https://google.com","role":"Kubemaster","status":"Pending","project":"thanos","hypervisor":"kubernetes","gateway":"vh10","netmask":24}]` — Arzu Suleymanov, Dec 18 '19 at 10:58
@ArzuSuleymanov I have update your stackblitz url here: https://stackblitz.com/edit/angular-upkwcq?file=src%2Fapp%2Fapp.component.html Please check it is working fine now. — tutorialfeed, Dec 18 '19 at 12:28
@tutorialfeed unfortunately not working and not showing errors as well — Arzu Suleymanov, Dec 18 '19 at 12:34
@ArzuSuleymanov check this new url: https://stackblitz.com/edit/angular-lyxfnd — tutorialfeed, Dec 18 '19 at 12:34
@tutorialfeed I have no problem getting data with ngFor, and I can not see cpuTitle where you are showing this property in html? — Arzu Suleymanov, Dec 18 '19 at 12:38
@ArzuSuleymanov check it now the same link. Is this what you want to achieve it. — tutorialfeed, Dec 18 '19 at 12:54
Inside *ngFor it shows, and yes expected result is this one, but I want to show outside *ngFor and it fails in this case — Arzu Suleymanov, Dec 18 '19 at 14:28

score 0 · Answer 1 · answered Dec 18 '19 at 10:24

You may be able to create a view child element ref and set the value on ngAfterViewInit. Please see code below:

Template:

<input type="hidden" name="cpuTitleName"  #cpuTitle value="vm.project" />
   <button class="btn btn-sm btn-danger" type="submit" (click)="deleteVm(vm.id)">
      i class="fas fa-trash"></i>
   </button>

TS:

   export class AppComponent implements OnInit, AfterViewInit  {...
    @ViewChild('cpuTitle', {static: false}) projectEl: ElementRef;

    ngAfterViewInit(): void {
    this.cpuTitle = this.projectEl.nativeElement.value;
}

Full stack blitz:

https://stackblitz.com/edit/angular-mebigy?file=src%2Fapp%2Fapp.component.html

In this case `nativeElement` of undefined. Cannot read property — Arzu Suleymanov, Dec 18 '19 at 10:56

How to extract values from *ngFor in Angular 8

1 Answers1