代码之家 › 专栏 › 技术社区 › mafortis

带功能的角度下载链接

ionic-framework angular

0

mafortis · 技术社区 · 5 年前

我有一个列表循环在我的视图中,这个列表的每个项目都有一个下载链接(基本上每个项目都是可下载的),现在我想添加下载链接,它来自frm API 按功能,但不确定怎么做?!

逻辑

API structure

product {
  documents [
    'doc1' => [
      'file' => 'http://....../dddd.zip',
      //etc.  
    ],
   'doc2' => [
      'file' => 'http://....../dddd.zip',
      //etc.  
    ],
  ],
  // 'etc.' =>....
}

代码

view

<ion-col size-xl="3" size-lg="4" size-md="4" size-sm="6" size-xs="12">
  <ion-item *ngFor="let doc of product.documents | slice:0:limit" (click)="downloadLink()">
    <ion-label>
      Download
    </ion-label>
    {{doc.download_count | number:'':'en-Us'}}
  </ion-item>
</ion-col>

controller

downloadLink() {
  // set document file link for download
}

聚苯乙烯 我的API文件链接可以通过 {{doc.file}} 这提供文件的完整URL,因为它来自API,没有需要添加任何其他 www....../etc.

注: 如果我得到我的文档链接将需要循环我的 product.documents 我想也是在控制器里为了得到那个 doc.file 链接。

知道吗?

1 回复 | 直到 5 年前

1

Poldo 5 年前

您可以使用html“a”下载属性

<ion-col size-xl="3" size-lg="4" size-md="4" size-sm="6" size-xs="12">
  <ion-item *ngFor="let doc of product.documents | slice:0:limit" (click)="downloadLink()">
    <ion-label>
      <a href="{{ doc.file }}" download>Download</a>
    </ion-label>
    {{doc.download_count | number:'':'en-Us'}}
  </ion-item>
</ion-col>

或者另一个解决方法是将对象传递给downloadlink函数

<ion-item *ngFor="let doc of product.documents | slice:0:limit" (click)="downloadLink(doc)">

在ts文件中

downloadLink(doc: any) {
   console.log(doc);
   window.open(doc.file);
}