This may work for you. Create a class that has an extract method then
import that class within your component. Within the component, you can
specify only the properties you want to extract. Then in the template use
that extract method to see the data. Or if you are interested in a library
that does this extraction of data for you; the Falcor library is what we
used at my last job.
https://netflix.github.io/falcor/documentation/jsongraph.html
For example - say I have a column for a table and only want to display
certain data - here is the column-settings.model.ts file:
type SortMethod<T> = (a: T, b: T) => number;
export class ColumnSetting<T> {
constructor(
public headerLabel: string,
public extract: (input: T) => string,
public sort?: SortMethod<T>
) {
this.headerLabel = headerLabel;
this.extract = extract;
this.sort = sort;
}
}
Then in my table-layout.component.ts file - I then specify each column by
doing this:
import { ColumnSetting } from
'@enterprise/prod/shared/table-layout/shared/layout/column-setting.model';
@Component({
selector: 'practice-table',
templateUrl: './practice-table.component.html',
styleUrls: ['./practice-table.component.scss'],
})
export class PracticeTableComponent implements OnInit {
tableData?: any;
tableSettings: ColumnSetting<IAuditLog>[] = [
new ColumnSetting<any>(
'Date / Time',
x => x.formattedDate,
(a: IAuditLog, b: IAuditLog) =>
new Date(b.formattedDate).valueOf() -
new Date(a.formattedDate).valueOf(),
),
new ColumnSetting<any>(
'User',
x => x.userName,
(a: IAuditLog, b: IAuditLog) => a.userName.localeCompare(b.userName),
),
new ColumnSetting<any>(
'Type',
x => x.displayType,
(a: IAuditLog, b: IAuditLog) =>
a.displayType.localeCompare(b.displayType),
),
];
Then in the view you can map the settings into the view like so:
<table class="table-row-layout">
<!-- TABLE HEADER -->
<thead>
<tr class="col-header" scope="row">
<ng-container *ngFor="let map of tableSettings; let i = index">
<!-- COLUMN HEADER -->
<th class="col col-{{ i + 1 }}" scope="col" role="columnheader">
<!-- NOT SORTABLE -->
<ng-container *ngIf="!map.sort">
{{ map.headerLabel }}
</ng-container>
<!-- SORTABLE -->
<ng-container *ngIf="map.sort">
<app-sort-button
[sort]="map.sort"
[label]="map.headerLabel">
</app-sort-button>
</ng-container>
</th>
</ng-container>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody>
<tr *ngFor="let data of tableData">
<ng-container *ngFor="let map of tableSettings; let i = index">
<!-- TABLE DATA -->
<td class="col col-{{ i + 1 }}
headers="{{ map.headerLabel }}">
{{ map.extract(data) }}
</td>
</ng-container>
</tr>
</tbody>
</table>
On Tue, Jun 4, 2019 at 9:35 AM NANA DARKO <kingsleydark...@gmail.com> wrote:
> Please I have this class in angular and have subscribed to an HttpResponse
> which returns the fields in my class plus extra fields I have not declared.
> Please how can I avoid those extra fields. Below is my class. Thank you!
>
>
> export class BatchTransactionForReport {
> recipient_bank_sort_code: string;
> recipient_bank_account_number: string;
> bank_account_verified: boolean;
> bank_refid: string;
> bank_status: string;
> bank_status_description: string;
> transaction_status: string;
> transaction_status_description: string;
> upload_date: string;
> last_update: string;
> verification_response: string;
> amount: string;
> narration: string;
> recipient_bank_name: string;
> }
>
> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@googlegroups.com.
> Visit this group at https://groups.google.com/group/angular.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/angular/dab8e022-fb3a-4014-8986-14e8fd3c9134%40googlegroups.com
> <https://groups.google.com/d/msgid/angular/dab8e022-fb3a-4014-8986-14e8fd3c9134%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/CAEwHGW3kRmAng8JNaAH98%2Bnpu4z%2BX%3DXt-7ZfWhsdYtKoCrq9Mg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
