Angular: Routing + Observable + Binding = ngtsc(2339)

Question

我有一个名为"它显示了一个项目列表(让一行产品)，我希望用户能够单击ID列值并将应用程序路由到名为" detail -productos"的子组件。本质上:一个产品列表，如果你点击该产品。显示一张卡片，显示产品的详细信息。

相关路由配置:

const routes: Routes = [
{ path: 'crear-pedido', component: CrearPedidoComponent,
children: [
{path: ':ID', component: DetalleProductosComponent},
]},
];

我正在传递行。ID数据到子组件，如下所示:

<td mat-cell *matCellDef="let row"><a [routerLink]="['/crear-pedido', row.ID]">  {{row.ID}} </a> </td>

这是detail - products .component.ts"文件:

import { Component, OnInit } from '@angular/core';
import { Producto_interface } from '../producto_interface';
import product_list from '../product_json.json' 
import { ActivatedRoute } from '@angular/router';
import { Observable, switchMap } from 'rxjs';
@Component({
selector: 'app-detalle-productos',
templateUrl: './detalle-productos.component.html',
styleUrls: ['./detalle-productos.component.css']
})
export class DetalleProductosComponent implements OnInit {
productos: Producto_interface [] = product_list;
selectedProduct: Observable<Producto_interface>;

constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.selectedProduct = this.route.paramMap.pipe(
switchMap(params => {
const id = params.get('ID');
console.log("Inside oninit")
console.log(this.productos.filter(p => p.ID.toString() == id?.toString()))
return this.productos.filter(p => p.ID.toString() == id?.toString())
})
)
}
}

如您所见，组件将包含所有产品的JSON文件获取到"product_list"ngOnInit()方法接收路由值并过滤product_list以找到正确的产品。目标是将产品信息传递给selectedProduct，然后在HTML中显示。

返回前的console.log工作正常:

0: Object { ID: "606", Nombre: "Tapitas Gran Valle Galleta Blanca 9 KG", Linea: "Tapitas", … }

下面是相关的HTML:

<mat-card class="product-card" *ngIf="selectedProduct | async as Producto_interface">
<mat-card-subtitle>Marca: {{selectedProduct['Marca']}}</mat-card-subtitle>
<mat-card-title>{{selectedProduct['Nombre']}}</mat-card-title>
<mat-card-content>
<p>Código interno: {{selectedProduct['ID']}}</p>
<p>Sabor: {{selectedProduct['Sabor']}}</p>
<p>Envase: {{selectedProduct['Envase']}}</p>
<p>Línea: {{selectedProduct['Linea']}}</p> 
</mat-card-content> 
<button mat-raised-button routerLink="/crear-pedido" color="primary">Cerrar</button>
</mat-card>

问题是，当你点击ID时，卡片出现了，但它是完全空的。

我是Angular的新手，正在努力弄清楚整个Observable<>和严格类型的考验。我必须加上:

"noImplicitAny": false,

到tsconfig。Json文件以便编译。我很确定正确的语法应该是:

selectedProduct.Marca

代替selectedProduct['Marca']

但是如果我这样做，我会得到以下错误:

Property 'Marca' does not exist on type 'Observable<Producto_interface>'.ngtsc(2339)

我已经检查了十几种不同的线程关于类似的问题，但在尝试了每一个解决方案之后，这就是我所得到的。

帮帮我，Stackoverflowers。你是我唯一的希望。

Answer 1

你有一个想要显示的Observable，这意味着你必须使用async管道:

<mat-card-subtitle>Marca: {{(selectedProduct|async)?.marca}}</mat-card-subtitle>

将订阅选中的产品，然后显示马卡属性的值。

或者你必须在你的局部变量中使用它，但是要正确命名它:

*ngIf="selectedProduct | async as product"

，然后在HTML块中使用:

<mat-card-subtitle>Marca: {{product?.marca}}</mat-card-subtitle>