我如何在CSS网格中插入角分量
我正在学习Angular，并且正在从事一个项目，其中我需要使用CSS网格布局。但是，我试图找到一种用给定的网格区域在网格中插入组件的方法。
我试图这样做，＆lt; app-slots＆gt;＆lt;/app-slots＆gt;，在app.component.ponent.html中插槽＆gt; 仅被计为一个网格位。即使这是42个地方。
slots.component.html：
＆lt; div class =“ abc” *ngfor =“让getarrayofnumbers（42）;让i = index“ [style.grid-row] =” i+1“样式=”高度：20px“＆gt; {{in}}＆lt;/div＆gt;
slots.component.ts：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-slots',
templateUrl: './slots.component.html',
styleUrls: ['../../app.component.css']
})
export class SlotsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getArrayOfNumbers(x: number){
var slots:number[] = [];
var a: number = x;
while(x != 0){
slots.push(x);
x--;
}
return slots;
}
}
注意：如果不清楚某些内容
I'm learning Angular, and I'm working on a project ,in which, I need to use a CSS grid layout. However, I'm trying to find a way to insert a component inside a grid with given grid-area.
I tried to do this, <app-slots></app-slots>, in app.component.html but the component <app-slots> was counted as one grid place only; even though, it's 42 places.
slots.component.html:
<div class="abc" *ngFor="let in of getArrayOfNumbers(42) ;let i = index" [style.grid-row] = "i+1" style = "height:20px" > {{in}} </div>
slots.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-slots',
templateUrl: './slots.component.html',
styleUrls: ['../../app.component.css']
})
export class SlotsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getArrayOfNumbers(x: number){
var slots:number[] = [];
var a: number = x;
while(x != 0){
slots.push(x);
x--;
}
return slots;
}
}
Note: If something is not clear please tell me to add more info
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以只插入标签之间的组件（而不是{{{in}}），然后使用Angular的绑定功能通过该功能发送来自.ts文件的任何更新变量？
两种绑定
can you just insert the component between your tags (instead of {{in}}), then send whatever updating variables from the .ts file through that using angular's binding feature ?
two way binding