angular - *ngFor 带子数组
问题描述
(对不起这个主题,但我不认为其他任何事情)
您好,我通过以下方式获取 JSON 数据:
{
(... some stuff...)
"credentials": {
"credential": [{
"username": "Peter",
"password": "dummy1"
}, {
"username": "Marc",
"password": "dummy2"
}, {
"username": "Oliver",
"password": "dummy3"
}, {
"username": "Tom",
"password": "dummy4"
}, {
"username": "Brian",
"password": "dummy5"
}]
}
}
我想用 *ngFor 显示它们,如下所示:
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
template: `
<form [formGroup]="form">
<input type="checkbox" formControlName="published"> Published
<div *ngIf="form.controls.published.value">
<h2>Credentials</h2>
<button (click)="addCreds()">Add</button>
<div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
<ng-container [formGroupName]="i">
<input placeholder="Username" formControlName="username">
<input placeholder="Password" formControlName="password">
</ng-container>
</div>
</div>
</form>
`,
})
export class AppComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
published: true,
// credentials: {credential: new FormArray([])}
credentials: {credential: this.fb.array([])}
});
}
addCreds() {
const creds = this.form.controls.credentials as FormArray;
// const creds = this.form.controls.credentials.value.credential as FormArray;
creds.push(this.fb.group({
username: '',
password: '',
}));
}
}
但这不起作用。:-( 问:我如何credentials
使用 *ngFor 显示所有内容?对我来说重要的是在这种情况下只有 *ngFor。
在此先感谢您并问候 Filout
解决方案
写在ts。
this.form = this.fb.group({
published: true
credentials: this.fb.array([])}
});
get credentials() {
return this.form.get('credentials') as FormArray
在 html 中
*ngFor="let creds of credentials?.controls; ......
推荐阅读
- css - 对齐列表项
- php - Laravel:未定义的变量:数据
- ios - 等效于 iOS 上的 AWS S3 开发工具包 TransferUtility.deleteTransferRecord() 函数
- shopify - Shopify Python API 如何检索客户的所有订单
- angular - 无法从 Angular 模态中的 id 获取元素
- python - Pandas Dataframe - (列重组)
- javascript - 读取一个 Excel 文件并在每个返回的行上执行一个脚本 - NodeJS/Javascript
- reactjs - redux 挂钩从 API 获取数据,并在单独的文件中执行操作
- android - 手动使用调试密钥签署未签名的 APK
- javascript - Discord.js 机器人从不同的 reddit 发送两个模因