我的应用程序是基于 Angular 的,我用表格行动态填充页面。页面下方有一个应用程序控制台,该元素的位置似乎是固定的。当我单击添加新行按钮时,新行与应用程序控制台重叠。如何避免这种情况。
下面是图片和代码片段。
**app.component.html**
<div>
<button style="width:100px;" class="btn" (click)="addProduct()" >Add
Product</button>
.... other elements needed for table row ....
</div>
<br>
<app-console [consoleMessages]="consoleMessages"></app-console>
**app.component.ts**
addProduct () {
let product = JSON.parse(JSON.stringify(this.productTemplate));
this.record['products'].push(product);//dynamically adds table row
}
Angular支持动态添加元素,如何避免元素重叠?
关于这个问题的更新:
console.component.html
<mat-tab-group class="console">
<mat-tab class="tab" label="Console">
<pre style="height:200px;"><code [innerHtml]="htmlCode"></code></pre>
</mat-tab>
</mat-tab-group>
console.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { highlightAuto } from 'highlight.js';
@Component({
selector: 'app-console',
templateUrl: './console.component.html',
styleUrls: ['./console.component.css']
})
export class ConsoleComponent implements OnInit {
@Input() consoleMessages = '';
consoleHtmlMessages = '';
constructor() { }
ngOnInit() {
}
get htmlCode() {
return highlightAuto(this.consoleMessages, ['html']).value;
}
}
/* reset the html and body */
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
}
.list, .console {
box-sizing: border-box;
padding: 0 1em;
/* this scroll will keep both areas always visible */
overflow: auto;
}
.list {
background: #ccedff;
flex-grow: 1;
}
.console {
background: #eeefef;
/* define a minumum size to your console */
min-height: 200px;
}
<div class="container">
<div class="list">
<!--- // your list component... -->
</div>
<div class="console">
<!--- // your console component... -->
</div>
</div>
Obs:这里的代码片段似乎无法正确呈现,因此您可以在下面看到一个实时示例。
实例 https://jsfiddle.net/ricardoferreirades/0fxc57vp/33/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)