угловая ссылка для скачивания с функцией

Question

У меня есть цикл списка, и у каждого элемента этого списка есть ссылка для скачивания (в основном каждый элемент доступен для скачивания), теперь я хотел бы добавить ссылку для загрузки, которая приходит от 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
}

PS Ссылка на мои файлы из API может быть доступна с {{doc.file}}, что дает полный URL-адрес файла в таком виде, какчто из API нет необходимости добавлять какие-либо дополнительные www....../etc.

Примечание: В случае, если я получаю мои документы, ссылки также должны будут зацикливать мой product.documents в контроллере. Угадай. Чтобы получить эту doc.file ссылку.

Есть идеи?

Answer 1

Вы можете использовать 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>

Или другой обходной путь - передать объект функции загрузки ссылки

<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);
}