在 Angular 中使用 JSON $ref 动态列出文件的超链接

Question

我有一个 Angular 站点，它在 Bootstrap 卡片中成功使用了 *ngFor。它有一个标题，并在标题下方列出了文档名称和扩展名。如图所示：

我希望 "handbook_2017.pdf" 成为 hyperlink，当有人点击 link 时，它会打开或下载到某人的计算机上——无论他们的浏览器设置如何选择都可以.

注意 URL 正确完美地工作。意思是 www.XXXX.com/assets/files/document_2017.pdf 是实时的，我看到了我应该看到的 PDF 文档。

Objective：non-technical 个人可以转到 assets 文件夹并拖动 drop/overwrite 具有最新副本的文件。或者如果文档的名称更改。必须进入 JSON 文件并更改标题。我想让一切尽可能模块化。另请注意 Bootstrap 卡片出现在多个页面上。所以我希望它是这样的，这样就没有人需要搜索不同的页面来进行更新。

也许我使用 $ref 不正确，或者有更好的方法可以为 Angular 实现此功能。我对其他选择持开放态度。

这是我的：

项目结构 - 只是一个片段

src
-----| app
        /home
            home.component.html
        /assets
            /files
                document_2017.pdf

HTML

<div class="card border-light mb-3" style="max-width: 20rem;">
  <div class="card-header">Quick References</div>
  <div class="card-body" *ngFor="let quick of quickReferences">
    <h6 class="card-title">{{ quick.title }}</h6>
    <p class="card-text">{{ quick.$ref }}</p>
  </div>
</div>

JSON

[{
  "title": "Handbook",
  "$ref": "file:#/assets/files/document_2017.pdf"
}, {
  "title": "Course Catalog",
  "$ref": "file:#/assets/files/velLectus.xls"
}, {
  "title": "Tools",
  "$ref": "file:#/assets/files/SitAmetNunc.xls"
}, {
  "title": "Tutorials",
  "$ref": "file:#/assets/files/imperdiet.ppt"
}, {
  "title": "Art",
  "$ref": "file:#/assets/files/MaurisEnimLeo.xls"
}, {
  "title": "Fix San",
  "$ref": "file:#/assets/files/MaurisEnimLeo.pdf"
}, {
  "title": "Vagram",
  "$ref": "file:#/assets/files/MaurisSit.ppt"
}, {
  "title": "Regrant",
  "$ref": "file:#/assets/files/NullaSuspendissePotenti.png"
}, {
  "title": "Treeflex",
  "$ref": "file:#/assets/files/UrnaPretiumNisl.jpg"
}, {
  "title": "Greenlam",
  "$ref": "file:#/assets/files/Posuere.xls"
}, {
  "title": "Sonsing",
  "$ref": "file:#/assets/files/Amet.csv"
}, {
  "title": "Toughjoyfax",
  "$ref": "file:#/assets/files/LacusAtTurpis.ppt"
}]

Answer 1

使用[href]

<div *ngFor="let quick of quickReferences">
    <a [href]="quick.$ref">{{quick.title}}</a>
</div>

在 Angular 中使用 JSON $ref 动态列出文件的超链接

Using JSON $ref in Angular, to dynamically list hyperlinks to files

json

href

twitter-bootstrap

ngfor

angular