如何动态传递 angular html 列表中的数据数组

Question

我正在尝试将数据数组对象动态传递给 html 列表。

 <div class="sidebar" *ngFor="let q of obj">
        <h4>Approvals</h4>

        <ul  *ngFor="let c of q.element">
            <li>
                <a href="#"><img class="sideico" src="../../../assets/images/icons/BRIA.svg" />{{c}}</a></li>
        </ul>
</div>

在ts文件中

 obj = [
          {
            "element" : "Timesheet",
            "icon": "../../../assets/images/icons/BRIA.svg"
          },
          {
            "element" : "Timesheet",
            "icon": "../../../assets/images/icons/BRIA.svg"
          }
];

我是 Angular 的新人。怎么了？

Answer 1

不需要重复两次。您只需要迭代一次，如下所示：

 <div class="sidebar">
        <h4>Approvals</h4>

        <ul>
            <li  *ngFor="let q of obj">
                <a href="#"><img class="sideico" [src]="q?.icon" />{{ q?.element }}</a>
            </li>
        </ul>
</div>

Answer 2

Demo 你只需要一个循环

 <div class="sidebar" >
     <h4>Approvals</h4>
     <ul  *ngFor="let q of obj">
        <li>
            <a href="#"><img class="sideico" [src]="q.icon | safe : 'url'" />{{q.element}}</a>  
        </li>
    </ul>
           
</div>

并使用自定义安全管道进行绑定

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }
}

如何动态传递 angular html 列表中的数据数组

How can I pass data array in list in angular html dynamically

angular

ngfor