Angular невозможно получить * ngДля данных для отображения списка имен файлов

Question

Я использую Angular 8, и в моем файле .ts у меня есть эти данные:

mydata = [
    {
        "files": [
            "file1.txt",
            "file2.txt",
            "file3.txt"
        ]
    }
];

Это я хочу отобразить имена файлов из данных, так что я пытаюсь:

<ul *ngFor="let list of mydata">
    <li>{{ list[0].files }}</li>
</ul>

Полагаю, мой формат неверный, так как он ничего не отображает.

Как я могу это исправить?

Answer 1

Имена файлов находятся в массиве, содержащемся в объекте, который снова является частью массива. Таким образом, вам может понадобиться два цикла на основе вашего фактического объекта. Попробуйте следующее

<ng-container *ngFor="let data of mydata">
  <ul *ngFor="let file of data.files">
    <li>{{ file }}</li>
  </ul>
<ng-container>

Answer 2

Вы можете использовать:

<ul>
  <li *ngFor="let list of mydata[0].files">{{list}}</li>
</ul>