Angular：组件的内容投影访问数据

@Component({
  selector: 'test-component',
  template: `
    <h1>My Test</h1>
    <ng-content></ng-content>
  `
})
export class TestComponent implements OnInit {

  @Input() data?: Array<{ name: string }>;

  ngOnInit(): void {
     this.data.map((item: any) => {
        item.name = item.name.toUpperCase();
        return item;
     });
  }

<test-component [data]="[{name: 'joe'}, {name: 'mike'}]">
    <p *ngFor="let person of data">{{ person.name }}</p>
</test-component>

@Component({
  selector: 'test-component',
  template: `
    <h1>My Test</h1>
    <ng-container
        [ngTemplateOutlet]="template"
        [ngTemplateOutletContext]=" {
           data: this.data
        }"
      ></ng-container>
  `
})
export class TestComponent implements OnInit {

  @Input() data?: Array<{ name: string }>;
  @ContentChild(TemplateRef) template: TemplateRef<any> | null = null;

  ngOnInit(): void {
     this.data.map((item: any) => {
        item.name = item.name.toUpperCase();
        return item;
     });
  }

<test-component [data]="[{name: 'joe'}, {name: 'mike'}]">
    <ng-template let-data="data">
        <p *ngFor="let person of data">{{ person.name }}</p>
    </ng-template>
</test-component>

Angular相关问答推荐

如何从Angular TS文件传递$Events对象？

如何在自定义验证器中获取所有表单控件(字段组动态创建)

如何跨不同组件使用ng模板

停靠的Angular 应用程序的Nginx反向代理无法加载assets资源

在Angular 应用中混合使用较少和较粗俗的文件

带独立零部件的TranslateLoader[Angular 16]

在Cypress中，对xlsx文件的读取并不总是正确的

Angular 单位测试表

为什么Angular的ViewEncapsulation枚举有没有值为1的键？

Angular Http 拦截器 - 修改标头会导致 CORS

升级到 Webpack 5.79.0 后 NX Angular 项目构建失败

Angular 等待对话框未显示

Angular：将间隔与增量和减量相结合

为什么 Redux 中的对象应该是不可变的？

如何以编程方式关闭 ng-bootstrap 模式？

全局异常处理

Angular 2 中的 $implicit 是什么？

Angular 2 Material 2 日期 Select 器日期格式

为什么用？模板绑定中的运算符？

declarations和entryComponents组件有什么区别