Why does overriding an attribute in a child class that extends from another not work as expected?
Here's a made-up scenario to simplify the issue:
Parent class
file: gridbase.component.ts
import { Component, OnInit } from '@angular/core';
import { Product } from '../grid/product';
import { ProductService } from '../grid/productservice';
@Component({
selector: 'app-grid-base',
templateUrl: './gridbase.component.html'
})
export class GridBaseComponent implements OnInit {
public rows: Product[] = [];
constructor(public productService: ProductService) { }
ngOnInit() {
this.productService.getProducts_1().subscribe(
response => this.rows = response
)
}
}
file: gribase.componen.html
<h1>Grid Base</h1>
<p-table [value]="rows" responsiveLayout="scroll">
<ng-template pTemplate="header">
<tr>
<th>Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.code}}</td>
<td>{{row.name}}</td>
<td>{{row.category}}</td>
<td>{{row.quantity}}</td>
</tr>
</ng-template>
</p-table>
file: product.ts
export interface Product {
id?:string;
code?:string;
name?:string;
description?:string;
price?:number;
quantity?:number;
inventoryStatus?:string;
category?:string;
image?:string;
rating?:number;
}
file: productservice.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Product } from './product';
@Injectable()
export class ProductService {
constructor(private http: HttpClient) { }
getProducts_1(): Observable<Product[]> {
return this.http.get<Product[]>('assets/products-example-1.json');
}
getProducts_2(): Observable<Product[]> {
return this.http.get<Product[]>('assets/products-example-2.json');
}
}
file: products-example-1.json
[
{
"id": "1",
"code": "f230fh0g3",
"name": "Example 1-1",
"description": "Product Description",
"image": "bamboo-watch.jpg",
"price": 65,
"category": "Accessories",
&quo...
<p><strong>Child class</strong></p>
<p><strong>file: gridchild.component.ts</strong></p>
<pre><code>import { GridBaseComponent } from './../gridbase/gridbase.component';
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../grid/productservice';
import { Product } from '../grid/product';
@Component({
selector: 'app-gridchild',
templateUrl: './gridchild.component.html',
styleUrls: ['./gridchild.component.css']
})
export class GridChildComponent extends GridBaseComponent implements OnInit {
override rows: Product[] = [];
constructor(override productService: ProductService) {
super(productService);
}
override ngOnInit() {
this.productService.getProducts_2().subscribe(
response => this.rows = response
)
}
}
file: gridchild.component.html
<p>Grid Child works!</p>
<pre>{{rows | json}}</pre>
<app-grid-base></app-grid-base>
The HTML template of gridchild.component.html displays the JSON correctly, but the line below that references the parent component does not show the updated values (it still shows the original values from the parent class). How can I make it display the same values as row 2 at this point
(<pre>{{rows | json}}</pre>)