(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). also showing id undefined

Question

this is service file

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class ItemServicesService {

  constructor(private http: HttpClient) { }

  baseurl: string = 'https://fireman-7cc06-default-rtdb.firebaseio.com/'

 

  viewFunction(id: string) {

    return this.http.get(this.baseurl + 'items/' + id)
  }



}

this is view-component.ts file

import { Component, OnInit } from '@angular/core';
import { ItemServicesService } from '../services/item-services.service';
import { ActivatedRoute } from '@angular/router'

@Component({
  selector: 'app-view-items',
  templateUrl: './view-items.component.html',
  styleUrls: ['./view-items.component.css']
})
export class ViewItemsComponent implements OnInit {

  viewItems: any
  viewId: string = ''

  constructor(private itemservices: ItemServicesService, private activateroute: ActivatedRoute) { }

  ngOnInit(): void {

    this.activateroute.params.subscribe(data => {
      this.viewId = data.id;
    }, err => {
      console.log('id not get' + err)
    })

    if (this.viewId !== null) {
      console.log(this.viewId)
      this.itemservices.viewFunction(this.viewId).subscribe(data => {
        this.viewItems = data
      }, err => {
        console.log('data not get' + err)
      })

    }

  }

}

this is view-component.html file

<ul *ngIf="viewItems">
    <li>{{viewItems.Item_name}}</li>
</ul>

this is list-item component-html file

here the view,edit,delete icons are placed, when clicking view icon,it will redirected to view component,but here getting 'undefined' insted of geting 'id' eg=http://localhost:4200/view/undefined

<div class="container">

    <h2 class="text-center"> Listing items</h2>
    <button type="button" class="btn btn-primary"><a class="topbtn" [routerLink]="['/add']">Add Items</a></button>
    <table *ngIf="listItems.length > 0" class="table table-hover">
        <thead>
            <tr>
                <th scope="col">No</th>
                <th scope="col">Item name</th>
                <th scope="col">Item color</th>
                <th scope="col">Item type</th>
                <th scope="col">Item price</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let info of listItems; let i=index">
                <th scope="row">{{i}}</th>
                <td>{{info[1]?.Item_name}}</td>
                <td>{{info[1]?.Item_color}}</td>
                <td>{{info[1]?.Item_type}}</td>
                <td>{{info[1]?.Item_price}}</td>
                <span class="action_edit"><i class="fas fa-edit"></i></span>
                <span class="action_delete"><i class="fas fa-trash-alt"></i></span>
                <span class="action_edit"><i [routerLink]="['/view/',info.id]" class="fa fa-eye"
                        aria-hidden="true"></i></span>

            </tr>

        </tbody>
    </table>
</div>

this is routing-module.ts file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddItemsComponent } from './add-items/add-items.component';
import { ListItemsComponent } from './list-items/list-items.component';
import { ViewItemsComponent } from './view-items/view-items.component';

const routes: Routes = [
  { path: '', component: ListItemsComponent },
  { path: 'add', component: AddItemsComponent },
  { path: 'list', component: ListItemsComponent },
  { path: 'view/:id', component: ViewItemsComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

What is the type of info? either array OR object

You access the name by calling:

info\[1]?.Item_name

And try to access the id by calling:

[routerLink]="['/view/',info.id]"

You could maybe try

[routerLink]="['/view/',info\[1].id]"

For the Access-Control-Allow-Origin problem, i usually fix this on the backend side by specify wich url can connect to my server. Maybe you can find something helpfull here Cross Origin sur Google

I hope this helped