ANGULAR 遍历模型中的数组
ANGULAR Iterate over an Array within a Model
剧情简介:
我正在尝试迭代作为对象的一部分返回的数组。该对象具有三个属性 2 字符串,1 数组。我想遍历我的 html 数组,但似乎无法填充它。我可以显示两个字符串,但无法弄清楚如何迭代内部数组的值。
Policy.ts
import { Document } from './Document';
export interface Policy {
insuredName: string;
policyNumber: string;
documents: Document[];
}
Document.ts
export interface Document {
url: string,
docType: string
}
我在我的父组件中绑定模型("policy")
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
policy: any = {};
constructor(private policyService: PolicyService, private alertify: AlertifyService) { }
ngOnInit() {
}
loadPolicy() {
this.policyService.getPolicy(this.policy.policyNumber).subscribe((res) => {
this.policy.insuredName = res.insuredName;
this.policy.policyNumber = res.policyNumber;
this.documents = res.documents;
}, error => {
this.alertify.error(error);
})
}
我将数据传递给我的子组件
Search.component.html
<app-documentList [policy]=policy></app-documentList>
然后绑定到child
export class DocumentListComponent implements OnInit {
@Input() policy: Policy;
ngOnInit() {
}
但是当我最终尝试迭代时,我得到的只是第一个 属性 (insuredName) 而没有 *ngFor
<div>
<div class="test">
<p>{{policy.insuredName}}</p>
<h2 *ngFor="let doc of policy.documents">{{doc.url}}</h2>
</div>
</div>
尝试用 this.policy.documents = res.documents;
替换 this.documents = res.documents;
。
看起来您将结果绑定到错误的变量。
此外,您可能不必手动分配值。您可以执行以下操作
import { Policy } from './Policy';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
policy: Policy = {};
constructor(private policyService: PolicyService, private alertify: AlertifyService) { }
ngOnInit() {
}
loadPolicy() {
this.policyService.getPolicy(this.policy.policyNumber).subscribe((res: Policy) => {
this.policy = res;
}, error => {
this.alertify.error(error);
});
}
}
剧情简介: 我正在尝试迭代作为对象的一部分返回的数组。该对象具有三个属性 2 字符串,1 数组。我想遍历我的 html 数组,但似乎无法填充它。我可以显示两个字符串,但无法弄清楚如何迭代内部数组的值。
Policy.ts
import { Document } from './Document';
export interface Policy {
insuredName: string;
policyNumber: string;
documents: Document[];
}
Document.ts
export interface Document {
url: string,
docType: string
}
我在我的父组件中绑定模型("policy")
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
policy: any = {};
constructor(private policyService: PolicyService, private alertify: AlertifyService) { }
ngOnInit() {
}
loadPolicy() {
this.policyService.getPolicy(this.policy.policyNumber).subscribe((res) => {
this.policy.insuredName = res.insuredName;
this.policy.policyNumber = res.policyNumber;
this.documents = res.documents;
}, error => {
this.alertify.error(error);
})
}
我将数据传递给我的子组件
Search.component.html
<app-documentList [policy]=policy></app-documentList>
然后绑定到child
export class DocumentListComponent implements OnInit {
@Input() policy: Policy;
ngOnInit() {
}
但是当我最终尝试迭代时,我得到的只是第一个 属性 (insuredName) 而没有 *ngFor
<div>
<div class="test">
<p>{{policy.insuredName}}</p>
<h2 *ngFor="let doc of policy.documents">{{doc.url}}</h2>
</div>
</div>
尝试用 this.policy.documents = res.documents;
替换 this.documents = res.documents;
。
看起来您将结果绑定到错误的变量。
此外,您可能不必手动分配值。您可以执行以下操作
import { Policy } from './Policy';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
policy: Policy = {};
constructor(private policyService: PolicyService, private alertify: AlertifyService) { }
ngOnInit() {
}
loadPolicy() {
this.policyService.getPolicy(this.policy.policyNumber).subscribe((res: Policy) => {
this.policy = res;
}, error => {
this.alertify.error(error);
});
}
}