Html 如何使用tr标签内的两个ngFor循环?
我附上了视图的图像。我想迭代tr标记内的两个ngfor循环。我在tr中使用了div标签,但它在标签旁边循环按钮。我想在文件表头(请参阅图像文件的理解) 表节: 这是我的HTML页面的表格部分Html 如何使用tr标签内的两个ngFor循环?,html,angular,typescript,user-interface,angular-material,Html,Angular,Typescript,User Interface,Angular Material,我附上了视图的图像。我想迭代tr标记内的两个ngfor循环。我在tr中使用了div标签,但它在标签旁边循环按钮。我想在文件表头(请参阅图像文件的理解) 表节: 这是我的HTML页面的表格部分 <table class="table"> <thead> <tr> <t
<table class="table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Created By</th>
<th scope="col">Date Created</th>
<th scope="col">File Name</th>
<th scope="col">File</th>
</tr>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="tmplt"></ng-template>
</tbody>
</table>
<input class="btn btn-primary" type="button" value="Save" />
<input class="btn btn-danger" type="button" value="Cancel" />
</form>
</div>
</div>
</div>
<ng-template #tmplt>
<tr *ngFor="let cattype of categorytype">
<td>{{cattype.Name}}</td>
<div *ngFor="let manage of managecontent">
<td>{{manage.CreatedBy}}</td>
<td>{{manage.CreatedDate}}</td>
<td>{{manage.DocumentDetails.DocName}}</td>
<td><app-file-upload [documentModel]="manage.DocumentDetails" [isMultipleFile]="true" [model]="manage" (emitterFile)="fileSelect($event)"></app-file-upload></td>
<td><input class="btn btn-danger" type="button" value="Remove" /></td>
</div>
</tr>
</ng-template>
您可以使用
ng模板
语法
有关更多信息:
{{cattype.Name}
{{manage.CreatedBy}}
{{manage.CreatedDate}
{{manage.DocumentDetails.DocName}
您可以使用ng模板
语法
有关更多信息:
{{cattype.Name}
{{manage.CreatedBy}}
{{manage.CreatedDate}
{{manage.DocumentDetails.DocName}
尝试将NgFor放入InvalidPipeArgument:“[object object]”对于管道“AsyncPipe”,我收到此错误您需要将管道导入模块,或删除管道。请参见此处InvalidPipeArgument:“[object object]”对于管道“AsyncPipe”,我收到此错误。您需要将管道导入模块,或删除管道。看这里
<div class="text-center">
<div class="container">
<div class="jumbotron">
<form novalidate>
<h3>Manage Content</h3>
<br>
<h4>Select Gender:</h4>
<label class="radio-inline"><input type="radio" #gender name="gender" value="1" checked>Male</label>
<label class="radio-inline"><input type="radio" #gender name="gender" value="2">Female</label>
<br>
<br>
<h4>Select Routing Type:</h4>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<select class="form-control">
<option>Choose Route Type</option>
<option *ngFor="let manage of dropdown" value="{{manage.Id}}">{{manage.Name}}</option>
</select>
</div>
</div>
<br>
<br>
<table class="table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Created By</th>
<th scope="col">Date Created</th>
<th scope="col">File Name</th>
<th scope="col">File</th>
</tr>
</thead>
<tbody>
<ng-template [ngTemplateOutlet]="tmplt"></ng-template>
</tbody>
</table>
<input class="btn btn-primary" type="button" value="Save" />
<input class="btn btn-danger" type="button" value="Cancel" />
</form>
</div>
</div>
</div>
<ng-template #tmplt>
<tr *ngFor="let cattype of categorytype">
<td>{{cattype.Name}}</td>
<div *ngFor="let manage of managecontent">
<td>{{manage.CreatedBy}}</td>
<td>{{manage.CreatedDate}}</td>
<td>{{manage.DocumentDetails.DocName}}</td>
<td><app-file-upload [documentModel]="manage.DocumentDetails" [isMultipleFile]="true" [model]="manage" (emitterFile)="fileSelect($event)"></app-file-upload></td>
<td><input class="btn btn-danger" type="button" value="Remove" /></td>
</div>
</tr>
</ng-template>
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core";
import { ManageContentService } from "../Service/managecontent.service";
import { ManageContentModel, dropdownmodel, categorytypemodel } from "../Model/managecontent.model";
import { DocumentDetails } from "../Model/document.model";
@Component({
selector: 'manage-content',
templateUrl: './app/QadAdminConfig/Templates/managecontent.component.html',
providers: [ManageContentService]
})
export class ManageContentComponent implements OnInit {
data: any;
categorytype: Array<categorytypemodel> = [];
dropdown: Array<dropdownmodel> = [];
managecontent: Array<ManageContentModel> = [];
@ViewChild("tmplt") tmpltTbl: TemplateRef<any>;
ngOnInit()
{
this.getRouType();
this.getcontenttype();
}
constructor(private _managecontentService: ManageContentService)
{
let model: ManageContentModel = new ManageContentModel();
model.DocumentDetails = new DocumentDetails();
model.DocumentDetails.Id = 0;
this.managecontent.push(model);
}
getRouType() {
this._managecontentService.GetRouteType().subscribe(
data => {
if (data.Success) {
this.dropdown = data.Result as dropdownmodel[];
console.log(this.dropdown);
}
});
}
getcontenttype() {
this._managecontentService.GetContent().subscribe(
data => {
if (data.Success) {
this.categorytype = data.Result as categorytypemodel[];
console.log(this.categorytype);
console.log(this.managecontent);
}
});
}
getdata() {
}
}
import { BaseModel } from "./base.model";
import { DocumentDetails } from "./document.model";
export class ManageContentModel extends BaseModel {
RouteTypeId: number;
CategoryTypeId: number;
Gender: number;
DocId: number;
DocumentDetails: DocumentDetails;
}
export class dropdownmodel {
Id: number;
Name: string;
Name_AR: string;
}
export class categorytypemodel {
Id: number;
Name: string;
Name_AR: string;
}
<tr *ngFor="let cattype of categorytype">
<td>{{cattype.Name}}</td>
<ng-template ngFor let-manage [ngForOf]="managecontent | async">
<td>{{manage.CreatedBy}}</td>
<td>{{manage.CreatedDate}}</td>
<td>{{manage.DocumentDetails.DocName}}</td>
<td><app-file-upload [documentModel]="manage.DocumentDetails" [isMultipleFile]="true" [model]="manage" (emitterFile)="fileSelect($event)"></app-file-upload></td>
<td><input class="btn btn-danger" type="button" value="Remove" /></td>
</ng-template>
</tr>