Wie werden die zwei ngFor-Schleifen innerhalb des tr-Tags verwendet?

Question

View of the page

Ich befestigte das Bild der Ansicht. Ich möchte die zwei ngfor-Schleifen innerhalb des tr-Tags iterieren. Ich habe das div-Tag innerhalb des trs verwendet, aber es ist der Knopf neben dem Tag. Ich will das in Dateitabelle Header (bitte lesen Sie die Bilddatei für das Verständnis) ...

Tabellenbereich: Dies ist der Tabellenabschnitt meiner HTML-Seite.

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

vollständige HTML-Vorlage:

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

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() { 

    } 
} 

Modell:

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

können Sie verwenden ng-template Syntax

Für weitere Informationen: 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>