установить значок в зависимости от расширения файла. Angular 7 - PullRequest
Новая
       50

установить значок в зависимости от расширения файла. Angular 7

0 голосов
/ 24 февраля 2020

Я работаю с Angular 7, и у меня есть список, где я отображаю некоторые названия документов со значком. В этот момент я показываю тот же значок, неважно, что это за документ, но у меня есть значки для документа Excel, pdf, do c, image, et c. Я хочу знать, если есть способ установить значок на основе расширения документа.

Пока у меня это так: enter image description here

С html вот так: 

<h6 class="list-tittle">
  Documentos
</h6>
<div >
  <ul class="list-group">
    <li *ngFor="let document of documents;" class="list-item"><i class="fa fa-file-pdf-o" style="color:#5cb85c;" aria-hidden="true"></i> {{document}}</li>
  </ul>
</div>
<button type="button" class="btn  tolowercase">Agregar Documento</button>
<h6 class="list-tittle">
  Anexos
</h6>
<div>
  <ul class="list-group">
    <li *ngFor="let anexo of anexos;" class="list-item"><i class="fa fa-file-excel-o" style="color:#5cb85c;" aria-hidden="true"></i> {{anexo}}</li>
  </ul>
</div>
<button type="button" class="btn  tolowercase">Agregar Anexo</button>

И ожидаемое поведение состоит в том, что в списке отображаются такие значки: ОЖИДАЕМЫЕ: enter image description here

Я ценю любую помощь.

1 Ответ

0 голосов
/ 24 февраля 2020

Для этого вам необходимо выполнить следующие действия

1) Извлечь расширение каждого документа

2) создать массив, содержащий имя класса значка с каждым типом

, используемым ниже пример

.ts 

export class AppComponent {
  documentList = ["document1.pdf", "document2.xlsx", "document3.jpg"];
  iconList = [ // array of icon class list based on type
    { type: "xlsx", icon: "fa fa-file-excel-o" },
    { type: "pdf", icon: "fa fa-file-pdf-o" },
    { type: "jpg", icon: "fa fa-file-image-o" }
  ];

  getFileExtension(filename) { // this will give you icon class name
    let ext = filename.split(".").pop();
    let obj = this.iconList.filter(row => {
      if (row.type === ext) {
        return true;
      }
    });
    if (obj.length > 0) {
      let icon = obj[0].icon;
      return icon;
    } else {
      return "";
    }
  }
}

. html

<div *ngFor="let filename of documentList"> 
      <i class="{{getFileExtension(filename)}}" style="color:#5cb85c;" aria-hidden="true"></i> 
      {{filename}}
</div>

Рабочий пример ссылки

https://stackblitz.com/edit/angular-4bexr3?embed=1&file=src / приложение / app.component. html

...