我有以下数据
[
{
"_id": "c9d5ab1a",
"subdomain": "wing",
"domain": "aircraft",
"part_id": "c9d5ab1a",
"info.mimetype": "application/json",
"info.dependent": "parent",
"nested": [
{
"domain": "aircraft",
"_id": "c1859902",
"info.mimetype": "image/jpeg",
"info.dependent": "c9d5ab1a",
"part_id": "c1859902",
"subdomain": "tail"
}
]
},
{
"_id": "1b0b0a26",
"subdomain": "fuel",
"domain": "aircraft",
"part_id": "1b0b0a26",
"info.mimetype": "image/jpeg",
"info.dependent": "no_parent"
}
]
Run Code Online (Sandbox Code Playgroud)
这里 if "info.dependent": "parent"
then 它是嵌套的,如果"info.dependent": "no_parent"
then 它没有孩子。我试图创建一个动态表,但我被困在如何使用嵌套表使其可折叠/可扩展。这是我在stackblitz 上的代码。
<mat-table class=" mat-elevation-z8" [dataSource]="dataSource">
<ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
<mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
<mat-cell *matCellDef="let element"> …
Run Code Online (Sandbox Code Playgroud) 我正在学习 angular 8,并且正在使用 Karma 进行单元测试。我创建了一个可以正常工作的基本注册表单,但我在测试中遇到了问题。
经过测试,我遇到了 2 次失败
RegisterComponent > 表单应该是有效的错误:预期验证器返回 Promise 或 Observable。
和
RegisterComponent > 应该调用 onSubmit 方法错误::预期是间谍,但得到了 FormGroup({validator: Function, asyncValidator: null, _onCollectionChange: Function, Pristine: true, touch: false, _onDisabledChange: [ ], controls: Object({ name: FormControl({validator: Function, asyncValidator: null, _onCollectionChange: Function, pristine: true, touch: false, _onDisabledChange: [ Function ], _onChange: [ Function ], _pendingValue: '', value: '', status: 'INVALID' , 错误: Object({ required: true }), valueChanges: EventEmitter({ _isScalar: false, Observers: [ ], closed: false, isStopped: false, hasError: false, throwError: …
我正在尝试自动调整大小textarea
以使其适合其中的内容,但是在单击 Enter 以继续下一行后,我遇到了口吃问题。我怎样才能解决这个问题?
有关 StackBlitz 示例,请参阅此链接
代码
this.form.valueChanges.subscribe(() => {
const textarea = this.myDiv.nativeElement;
textarea.addEventListener('keydown', function() {
setTimeout(() => {
this.style.cssText = 'height:auto; padding:0';
this.style.cssText = 'height:' + this.scrollHeight + 'px';
}, 0);
});
});
Run Code Online (Sandbox Code Playgroud) 我更改了mat-table中的direction列,之后无法将ng-container添加到表中。我是这样做的。在这种情况下,如何在我的内容中添加预定义的行?
component.ts
export class MyComponent implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'actions'];
dataSource = ELEMENT_DATA;
fourthFormGroup: FormGroup;
displayColumns: string[];
displayData: any[];
constructor(
private _formBuilder: FormBuilder
) { }
ngOnInit() {
this.displayColumns = ['0'].concat(this.dataSource.map(x => x.position.toString()));
this.displayData = this.displayedColumns.map(x => this.formatInputRow(x));
this.fourthFormGroup = this._formBuilder.group({});
}
formatInputRow(row) {
const output = {};
output[0] = row;
for (let i = 0; i < this.dataSource.length; ++i) {
output[this.dataSource[i].position] = this.dataSource[i][row];
}
return output;
}
}
Run Code Online (Sandbox Code Playgroud)
component.html
<table mat-table …
Run Code Online (Sandbox Code Playgroud) 我正在使用 Angular 8,并且不断收到有关 Angular/compiler-cli 对等依赖关系的 npm 警告。
npm WARN @angular/compiler-cli@8.1.2 需要 @angular/compiler@8.1.2 的同级,但没有安装。您必须自己安装对等依赖项。
但是,如果我执行 a npm install @angular/compiler@8.1.2
,npm 会继续抱怨相同的消息。
@angular/compiler@^8.0.0 安装在 dependency 下的 package-json 下,而 '@angular/compiler-cli@^8.1.2 和 @angular/compiler@^8.1.2 安装在 devDependencies 下。
这对我来说没有任何意义。
有谁知道如何生成提供更多信息的错误消息?
或者至少如何解决这种类型的 npm 不一致问题?
好的。我不敢相信我是第一次就一些本来应该很容易完成的事情提出问题,但我们已经到了。
我希望我的 mat-horizontal-stepper 中的最后一步在单击特定按钮后显示复选标记图标和绿色背景,就像之前步骤的图标一样。该按钮就是下图中的“是,确认”按钮。
单击后,我希望带有数字 3 的蓝色图标变为我之前描述的复选标记图标,表明所有步骤现已完成。步骤 1 和 2 会自动执行,因为一旦按下标记为“matStepperNext”的按钮,似乎“mat-step-icon-state-done”类就会应用于它们。遗憾的是,步骤 3 没有这样的按钮,因此必须手动完成。
现在,我已经尝试了与此相关的搜索中可能出现的所有内容。许多帖子建议使用自定义图标,并使用 状态<ng-template></ng-template>
,但这并没有奏效。其他人建议用 标记该步骤completed=true; editable=false;
,但这仅在移至下一步时才有效,这意味着它不适用于最后一步。我的假设是,必须有某种方法以某种方式将“mat-step-icon-state-done”类添加到 mat-icon 中,但我不太确定如何去做。另外,如果我的预感完全错误,请随时为我指出正确的方向。
任何人都可以推荐一些带有 angularjs 的好的日期范围选择器,它也可以在没有范围的情况下工作吗?那么,在不同的用例中灵活使用和可定制?
datepicker angularjs angularjs-1.5 bootstrap-daterangepicker
我有以下用例:
有一个input
,应该旁边时,它具有焦点的输入来显示弹出。因此,当input
具有焦点时,用户可以输入input
或使用弹出窗口来选择某些内容。
用户完成后,他可以通过单击其他位置或按 Tab 键并聚焦下一个元素来取消对元素的聚焦。但是,如果他单击弹出窗口内的按钮,弹出窗口应保持打开状态,输入应保持聚焦,以便用户可以继续键入。
我遇到的问题是,(click)
在弹出窗口中处理输入之前,角度处理(模糊)。这意味着当用户在弹出窗口中点击时,输入失去焦点,它被隐藏,然后用户的点击将不再被处理。
我为这个问题制作了一个stackblitz-demo:
这是源代码:
应用程序组件.html
<h1>Hello</h1>
<p>
Type 'one', 'two' or 'three' to change number or select a number
from popup.
<br>
<input type="checkbox" [(ngModel)]="hideHelperOnBlur" /> Hide
helper on blur (if this is set, then the buttons in the popup don't work
but if this is not set, the popup doesn't close if the input looses
focus -> how can I get both? The buttons to …
Run Code Online (Sandbox Code Playgroud) 我在 Angular 8 中使用反应式表单将数据插入数据库,但收到此错误TypeError: Converting circular structure to JSON
。据说name
财产是一个循环结构,我无法找出原因。谁能帮我吗?提前致谢。
我的组件.ts
export class AddMainCategoryComponent implements OnInit {
nm;
desc;
date;
get name() {
return this.addMCform.get('name')
}
get description() {
return this.addMCform.get('description')
}
constructor(public mainCategoryService: MainCategoryService, private fb: FormBuilder) { }
addMCform = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
description: ['']
})
ngOnInit() {
}
addMain_categories() {
let main_category = {
nm: this.name,
desc: this.description,
date: new Date(),
}
this.mainCategoryService.addMain_categories(main_category).then(data => {
console.log(data);
})
}
}
Run Code Online (Sandbox Code Playgroud)
html
<div class="container-fluid"> …
Run Code Online (Sandbox Code Playgroud) 我编写了一个自定义的 svelte 组件。现在,我想使用 javascript 在另一个类中创建该元素。我怎样才能做到这一点?以下是我想让它工作的代码:
<script>
import component2 from "./Component2.svelte";
function abc() {
var element = document.createElement("component2");
document.getElementById("abc").appendChild(element);
}
</script>
<div id="abc" use:abc>dsaads</div>
Run Code Online (Sandbox Code Playgroud)
这是一个工作示例。
任何帮助都会很棒。
angular ×8
javascript ×4
html ×2
typescript ×2
angular8 ×1
angularjs ×1
blur ×1
css ×1
datepicker ×1
events ×1
focus ×1
forms ×1
mat-stepper ×1
mat-table ×1
npm ×1
svelte ×1
textarea ×1
unit-testing ×1
validation ×1