gpt4 book ai didi

angular - ng-template - 类型变量

转载 作者:太空狗 更新时间:2023-10-29 17:19:02 29 4
gpt4 key购买 nike

父组件如何识别来自 ngTemplateOutletContextlet-content 类型?现在 {{content.type}} 工作正常,但 IDE 说:

unresolved variable type

如何将其输入为 Video

parent.component.ts:

export interface Video {
id: number;
duration: number;
type: string;
}

public videos: Video = [{id: 1, duration: 30, type: 'documentary'}];

parent.component.html:

<ul>
<li *ngFor="let video of videos">
<tile [bodyTemplate]="tileTemplate" [content]="video"></app-card>
</li>
</ul>

<ng-template #tileTemplate let-content>
<h5 class="tile__type">{{content.type}}</h5>
</ng-template>

tile.component.ts:

@Component({
selector: 'tile',
templateUrl: './tile.component.html',
styleUrls: ['./tile.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardComponent {
@Input() tileTemplate: TemplateRef<any>;
@Input() content: Video;
}

tile.component.html:

<div
...
<ng-container
[ngTemplateOutlet]="tileTemplate"
[ngTemplateOutletContext]="{ $implicit: content }">
</ng-container>
...
</div>

最佳答案

let-* 变量没有类型推断。 let- 上下文是 Angular 的微语法解析器的一部分,IDE 无法推断类型,因为没有明确的来源。

https://gist.github.com/mhevery/d3530294cff2e4a1b3fe15ff75d08855

您可以尝试使用 $any()

消除 IDE 警告

https://angular.io/guide/template-syntax#the-any-type-cast-function

<ng-template #tileTemplate let-content>
<h5 class="tile__type">{{$any(content).type}}</h5>
</ng-template>

您可以强制使用函数进行类型推断

<ng-template #tileTemplate let-content>
<h5 class="tile__type">{{toVideo(content).type}}</h5>
</ng-template>

public toVideo(value: any): Video { return value as Video; }

关于angular - ng-template - 类型变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55458421/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com