- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
嘿,我正在尝试使用产品构建网站,但我无法从 productsComponent 获取数据到 ProductDetailsComponent。请帮助我。
在我的 Product.ts 中我有:
export class Product {
id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}
在我的 ProductsComponenet 中我有:
import { Component } from '@angular/core';
import { Product } from '../services.service';
@Component({
selector: 'app-services',
templateUrl: './services.component.html',
styleUrls: ['./services.component.css']
})
export class ServicesComponent {
public products: Product[] = [
new Product(1, "Product 001"),
new Product(2, "Product 002"),
new Product(3, "Product 003"),
new Product(4, "Product 004"),
new Product(5, "Product 005"),
new Product(6, "Product 006"),
new Product(7, "Product 007"),
new Product(8, "Product 008")
];
}
在我的 ProductDetailComponent 中:
import {Component, OnInit} from '@angular/core';
import { ActivatedRoute} from '@angular/router';
import { Product } from '../services.service';
@Component({
selector: 'app-detail-service',
templateUrl: './detail-service.component.html',
styleUrls: ['./detail-service.component.css']
})
export class DetailServiceComponent implements OnInit {
public products: Product[] = [
new Product(1, "Product 001"),
new Product(2, "Product 002"),
new Product(3, "Product 003"),
new Product(4, "Product 004"),
new Product(5, "Product 005"),
new Product(6, "Product 006"),
new Product(7, "Product 007"),
new Product(8, "Product 008")
];
product: Product = this.products[0];
constructor(private routes: ActivatedRoute) {}
ngOnInit() {
this.routes.params.subscribe(params => {
this.products.forEach((p: Product) => {
if (p.id === params.id) {
this.product = p;
}
});
});
}
}
我在 products.html 中显示每个产品,在我点击任何产品后,它会呈现我的 productdetails.html 和我的产品,但不显示正确的名称和 ID。 IT 在每个产品中显示第一个,但链接与产品的 id 是正确的。请帮忙。我真的搞不懂这是怎么回事。
最佳答案
要直接解决您的问题,您需要执行以下操作:
this.route.paramMap.subscribe(params => {
let id = params.get('id');
this.product = this.products.find(product => product.id === +id);
})
请注意,路由参数始终是字符串,因此在上面的代码片段中,我在 find
方法中将 id 转换为数字。
不过,我建议您完全避免显式订阅。下面,我描述了一个更加可维护的实现,它更紧密地遵循响应式(Reactive)范例,并且我已经包含了一个有效的 stackblitz 示例。
您将通过管道连接到 paramMap
observable 以获取您的路由参数,使用 switchMap
运算符订阅它,并使用产品服务通过 id 获取产品。
您的 product-detail.component.ts 看起来像这样:
@Component({
selector: 'app-product-detail',
templateUrl: './product-detail.component.html',
styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
product$: Observable<any>;
constructor(
private route: ActivatedRoute,
private productService: ProductService
) { }
ngOnInit() {
this.product$ = this.route.paramMap.pipe(
switchMap(params => {
let id = params.get('id');
return this.productService.getProductById(+id);
})
)
}
}
请注意,pipe
在我们订阅它之前不会执行。为此,我们应该使用 async
管道。所以你的 product-detail.component.html 应该是这样的:
<div class="product-detail-wrapper" *ngIf="product$ | async as product">
<h3>Product Detail</h3>
<p>Product ID: {{ product.id }}</p>
<p>Product Name: {{ product.name }}</p>
</div>
有关工作示例,请查看此 stackblitz .
关于angular - 访问路由参数 - angular 8,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59938409/
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
PowerShell Web Access 允许您通过 Web 浏览器运行 PowerShell cmdlet。它显示了一个基于 Web 的控制台窗口。 有没有办法运行 cmdlet 而无需在控制台窗
我尝试在无需用户登录的情况下访问 Sharepoint 文件。 我可以通过以下任一方式获取访问 token 方法一: var client = new RestClient("https://logi
我目前正在尝试通过 Chrome 扩展程序访问 Google 服务。我的理解是,对于 JS 应用程序,Google 首选的身份验证机制是 OAuth。我的应用目前已成功通过 OAuth 向服务进行身份
假设我有纯抽象类 IHandler 和派生自它的类: class IHandler { public: virtual int process_input(char input) = 0; };
我有一个带有 ThymeLeaf 和 Dojo 的 Spring 应用程序,这给我带来了问题。当我从我的 HTML 文件中引用 CSS 文件时,它们在 Firebug 中显示为中止。但是,当我通过在地
这个问题已经有答案了: JavaScript property access: dot notation vs. brackets? (17 个回答) 已关闭 6 年前。 为什么这不起作用? func
我想将所有流量重定向到 https,只有 robot.txt 应该可以通过 http 访问。 是否可以为 robot.txt 文件创建异常(exception)? 我的 .htaccess 文件: R
我遇到了 LinkedIn OAuth2: "Unable to verify access token" 中描述的相同问题;但是,那里描述的解决方案并不能解决我的问题。 我能够成功请求访问 toke
问题 我有一个暴露给 *:8080 的 Docker 服务容器. 我无法通过 localhost:8080 访问容器. Chrome /curl无限期挂断。 但是如果我使用任何其他本地IP,我就可以访
我正在使用 Google 的 Oauth 2.0 来获取用户的 access_token,但我不知道如何将它与 imaplib 一起使用来访问收件箱。 最佳答案 下面是带有 oauth 2.0 的 I
我正在做 docker 入门指南:https://docs.docker.com/get-started/part3/#recap-and-cheat-sheet-optional docker-co
我正在尝试使用静态 IP 在 AKS 上创建一个 Web 应用程序,自然找到了一个带有 Nginx ingress controller in Azure's documentation 的解决方案。
这是我在名为 foo.js 的文件中的代码。 console.log('module.exports:', module.exports) console.log('module.id:', modu
我试图理解访问键。我读过https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-se
我正在使用 MGTwitterEngine"将 twitter 集成到我的应用程序中。它在 iOS 4.2 上运行良好。当我尝试从任何 iOS 5 设备访问 twitter 时,我遇到了身份验证 to
我试图理解访问键。我读过https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-se
我正在使用以下 API 列出我的 Facebook 好友。 https://graph.facebook.com/me/friends?access_token= ??? 我想知道访问 token 过
401 Unauthorized - Show headers - { "error": { "errors": [ { "domain": "global", "reas
我已经将我的 django 应用程序部署到 heroku 并使用 Amazon s3 存储桶存储静态文件,我发现从 s3 存储桶到 heroku 获取数据没有问题。但是,当我测试查看内容存储位置时,除
我是一名优秀的程序员,十分优秀!