locked
How to make column Name company without data based on field Name and Column Type? RRS feed

  • Question

  • User696604810 posted

    I work on angular 7 app I face issue : I can't make column Name company Name display Empty or without

    data where field Name of report Control json is Company Name and column type=1

    report control is table have field Name AND column Type .

    Based on Field Name value and column Type=1 I will hide or not display data to column Assigned to Field Name .

      <ng-container *ngFor="let repcon of ReportControl">
    
                              <div *ngIf="coln==repcon.fieldName">
    
                                <div *ngIf="repcon.columnType==1">
    
                                </div>
                              </div>
                            </ng-container>

    stack blitz I work on it as below and it have all data related and code :

    https://stackblitz.com/edit/create-z4aduq?file=app/app.component.html

    On component.ts

    repcon return data for report control as below :

    report control is 
    [{"reportId":2028,"fieldName":"companyName","reportStatus":"Icon","columnType":1},
     {"reportId":2028,"fieldName":"onlineURL","reportStatus":"Hidden","columnType":2}]

    I don't need display data for column name company Name only .

    How I do that ?

    Expected result as you see below company name is empty :

    hide data or not display data on company name column

    Saturday, July 11, 2020 2:10 PM

Answers

  • User303363814 posted

    Move the logic out of the template and into the controller.

    Create a method in the controller which determines what string to display based on the raw string and the column name, something like

    filedContents(raw: string, columnName: string): string {
       const isCompanyNameRep1 = this.ReportControl.find(
                      rc => rc.fieldName === columnName &&
                            rc.columnType === 1);
       return isCompanyNameRep1 ? '' : raw;
    }

    The template then becomes

    <ng-container *ngFor="let repdata of ReportData">
       <tr *ngFor="let rep of contentBody">
          <td *ngFor="let coln of headerCols">
             <span >
                {{fieldContents(rep[coln], coln)}}
             </span>
          </td>
       </tr>
    </ng-container>

    (You could do it all in the template but it is best to have the template concerned with display and the controller to be concerned with logic)

    You can use a similar method to control display of the column header.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 13, 2020 12:49 AM

All replies

  • User303363814 posted

    Move the logic out of the template and into the controller.

    Create a method in the controller which determines what string to display based on the raw string and the column name, something like

    filedContents(raw: string, columnName: string): string {
       const isCompanyNameRep1 = this.ReportControl.find(
                      rc => rc.fieldName === columnName &&
                            rc.columnType === 1);
       return isCompanyNameRep1 ? '' : raw;
    }

    The template then becomes

    <ng-container *ngFor="let repdata of ReportData">
       <tr *ngFor="let rep of contentBody">
          <td *ngFor="let coln of headerCols">
             <span >
                {{fieldContents(rep[coln], coln)}}
             </span>
          </td>
       </tr>
    </ng-container>

    (You could do it all in the template but it is best to have the template concerned with display and the controller to be concerned with logic)

    You can use a similar method to control display of the column header.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 13, 2020 12:49 AM
  • User696604810 posted

    Thank you for reply 

    stackblitz exist above if you can test on it .

    it seems your solution is good but I test it and not work and no data display on all fields

    I put function on controller and on html i do code as below ;

     <table style="width: 100%; border: 1px solid #ddd;" class=" table table-striped">
    
                    <thead >
                      <tr>
                        <th  *ngFor="let coln of headerCols">
                          <ng-container>
                            <div>{{coln}}</div>
    
                          </ng-container>
    
                        </th>
    
    
                      </tr>
                    </thead>
                    <tbody>
    
                     <ng-container *ngFor="let repdata of ReportData">
       <tr *ngFor="let rep of contentBody">
          <td *ngFor="let coln of headerCols">
             <span >
                {{fieldContents(rep[coln], coln)}}
             </span>
          </td>
       </tr>
    </ng-container>
    
                            <ng-container *ngFor="let repcon of ReportControl">
    
                              <div *ngIf="coln==repcon.fieldName">
    
                                <div *ngIf="repcon.columnType==1">
    
                                </div>
                              </div>
                            </ng-container>
    
                          
                    </tbody>
                  </table>
       
      
    
    
    
    
    
    
    
    
    
    
    
    
          
            
            
    
                
    
                 
    
     
     
    
    
    

    Monday, July 13, 2020 2:40 PM
  • User696604810 posted

    I hope any one help me

    Monday, July 13, 2020 2:50 PM
  • User303363814 posted

    Your template has code that my example does not have.

    What do you have in the controller?  There is an error in it.

    Monday, July 13, 2020 11:50 PM
  • User696604810 posted

    Thank you for reply result I need as below :

    hide data based on field Name for report control table

    Tuesday, July 14, 2020 12:28 AM
  • User696604810 posted

    I do as code you write above 

    put my function on controller (component.ts)

     filedContents(raw: string, columnName: string): string {
       const isCompanyNameRep1 = this.ReportControl.find(
                      rc => rc.fieldName === columnName &&
                            rc.columnType === 1);
       return isCompanyNameRep1 ? '' : raw;
       console.log("company hidden" + isCompanyNameRep1);
    }

    and component.html

    i write I do on html above 

    Tuesday, July 14, 2020 12:37 AM
  • User303363814 posted

    It looks like you have started to do some debugging - console.log (but having it after the return statement makes me think you have some very basic lack of knowledge)

    What debugging are you doing? What do you learn?  Do you understand the controller method?  Is it being called?  Does it give the right results?  If not, why not?  What are the actual parameters being passed?  What are the internal variable values in the method?  What is being returned?

    Wednesday, July 15, 2020 2:06 AM