How to make column Name company without data based on field Name and Column Type?[Answered] RSS

• • Reply
  ahmedbarbary

  Member

  41 Points

  376 Posts

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

  Jul 11, 2020 02:10 PM|ahmedbarbary|LINK

  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 :

  

• • Reply
  PaulTheSmith

  Participant

  1660 Points

  952 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 13, 2020 12:49 AM|PaulTheSmith|LINK

  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.

• • Reply
  ahmedbarbary

  Member

  41 Points

  376 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 13, 2020 02:40 PM|ahmedbarbary|LINK

  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>
     
    
  
  
  
  
  
  
  
  
  
  
  
  
        
          
          
  
              
  
               
  
   
   
  
  
  

• • Reply
  ahmedbarbary

  Member

  41 Points

  376 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 13, 2020 02:50 PM|ahmedbarbary|LINK

  I hope any one help me

• • Reply
  PaulTheSmith

  Participant

  1660 Points

  952 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 13, 2020 11:50 PM|PaulTheSmith|LINK

  Your template has code that my example does not have.

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

• • Reply
  ahmedbarbary

  Member

  41 Points

  376 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 14, 2020 12:28 AM|ahmedbarbary|LINK

  Thank you for reply result I need as below :

  

• • Reply
  ahmedbarbary

  Member

  41 Points

  376 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 14, 2020 12:37 AM|ahmedbarbary|LINK

  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 

• • Reply
  PaulTheSmith

  Participant

  1660 Points

  952 Posts

  Re: How to make column Name company without data based on field Name and Column Type?

  Jul 15, 2020 02:06 AM|PaulTheSmith|LINK

  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?