带有角度的.NET WEB API:无法通过从服务器读取数据导航到网站

Question

我将数据从服务器带到客户端在模型中，我有一个url，我想用该url导航到网站

问题是，当我点击链接时，它会将我重定向到页面，而不会将我引导到网站：在此处输入图像描述

例如：

"id": 1,
"name": "Google",
"url": "www.google.com",

点击链接我想导航到谷歌

型号：

export default class Site{
id: number = -1;
name: string = '';
url: string = '';
}

组件.ts:

export class AppComponent implements OnInit{
sites: Site[] = [];
constructor(private siteService:SiteService, private router: Router) { }
ngOnInit(): void {
this.GetSites();
}
GetSites() {
this.siteService.GetSites()
.subscribe((sites) => {
this.sites = sites;
});
}
}

HTML:

<div *ngFor="let item of sites; let i = index">
<div>Id: {{item.id}}</div>
<div>Name: {{item.name}}</div>
<a href="item.url">{{item.url}}</a>
</div>

Answer 1

您当前正在传递纯字符串"item.url"；作为锚标签的URL。如果要将JSON对象的属性传递给锚点标记，则应包含方括号([](，以便将对象属性绑定到它：

<a [href]="item.url">{{item.url}}</a>

在评论中反馈后编辑您还应该在url属性中包括协议，例如更改

"url": "www.google.com",

至

"url": "http://www.google.com",