Question

我附上了视图的图像。我想迭代tr标签内的两个ngfor循环。我在tr中使用了div标签，但它循环了标签旁边的按钮。我希望在文件表标题中（请参阅图像文件以了解）...

表部分：这是我的HTML页面的表格部分。

<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>

完整的Html模板：

 <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>

TS档案：

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;
}

Answer 1

您可以使用ng-template语法

有关详细信息：https://toddmotto.com/angular-ngfor-template-element#ngfor-and-ng-template

<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>

如何在tr标签内使用两个ngFor循环？

1 个答案: