我无法以角度访问 object 的属性

Question

i am using getshipment method to get data by id which is return an object and displaying on frontend like this [object Object]. i want to access the details and then display details on frontend

export class ShipmentInfoComponent implements OnInit {
  shipment: any[];
  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private shipmentService: ShipmentService
  ) {}

  ngOnInit(): void {
    this.getShipment();
  }
  getShipment(): void {
    const id = this.route.snapshot.paramMap.get('id');
    console.log(id);
    this.shipmentService
      .getShipment(id)
      .subscribe((shipment) => (this.shipment = shipment));
  }
}

my getshipment method in sevices is

  getShipment(id: string): Observable<any[]> {
    const shipmentUrl = `${this.url}/${id}`;
    return this.http.get<any[]>(shipmentUrl);
  }

html component of shipment info. shipment.id or shipment.name is returning undefined

<div class="shipment">
  {{ shipment }}
</div>

object data

 {
    "id": "S1000",
    "name": "T-shirts(Summer2018) from Shanghai to Hamburg",
    "cargo": [
      {
        "type": "Fabric",
        "description": "1000 Blue T-shirts",
        "volume": "2"
      },
      {
        "type": "Fabric",
        "description": "2000 Green T-shirts",
        "volume": "3"
      }
    ],
    "mode": "sea",
    "type": "FCL",
    "destination": "Saarbrücker Str. 38, 10405 Berlin",
    "origin": "Shanghai Port",
    "services": [
      {
        "type": "customs"
      }
    ],
    "total": "1000",
    "status": "ACTIVE",
    "userId": "U1000"
  },

Answer 1

You cannot print object directly, You have to print whatever value you want to print. like below,

If you are receiving array in response, then use below

<div class="shipment"  *ngFor="let ship of shipment">
 Name: {{ ship.name }}
 <br>
 Mode: {{ship.mode}}
</div>

Otherwise, Change your service method return type array to object like this,

getShipment(id: string): Observable<any> {
    const shipmentUrl = `${this.url}/${id}`;
    return this.http.get<any>(shipmentUrl);
  }

and html code will be like this,

<div class="shipment" *ngIf="shipment">
 Name: {{ shipment?.name }}
 <br>
 Mode: {{shipment?.mode}}
</div>

You can refer this link from Angular.io