0
여기에서 가장 좋은 방법은 무엇입니까? Material 버전은 잔인한 것으로 보이지만 구현하는 코드를 이해할 수 없습니다. 한편, 여러 데이터 유형을 가진 여러 테이블이 있으므로 전체 앱에서 재사용 가능한 것을 찾고 있습니다.페이지 네이션 구성 요소가있는 재사용 가능한 데이터 테이블에 대한 권장 사항 4/5
A
답변
1
라이브러리를 아직 완성하지 않은 경우 Datagrid component에서 Project Clarity을 찾아 보시기 바랍니다. 페이지 매김을 포함하여 많은 기능을 갖춘 강력한 구성 요소입니다.
1
테이블의 경우 * ngFor 루프가있는 부트 스트랩 그리드가 포함 된 공유 구성 요소를 사용하는 것이 좋습니다.
<div class="row listview">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<table id="myTable" class="table table-bordered">
<thead>
//CREATES TABLE HEADERS
<tr class="table-head-color">
<th *ngFor="let columns of data?.display_columns; let i = index">
{{ columns }}
<br>
</th>
</tr>
//THIS WILL CREATE CORRESPONDING DATA TO IT
<tr *ngFor="let row1 of data?.row1; let i= index">
<td style="white-space: nowrap" *ngFor="let columns of data?.display_columns; let i = index">
</span>
<span *ngIf="columns != 'someObject1'">{{ row1[columns] }}</span>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
편의를 위해 데이터를 재사용하고 조작 할 수 있습니다. 나도 여러 도서관을 보았고 과잉이라고 생각했다.
간단한 데이터 표시의 경우 외부 라이브러리가 좋지만 이벤트 바인딩을 사용하면 혼란이 발생합니다.
페이지 매김에 대해서도 부트 스트랩 페이지 매김을 살펴볼 수 있습니다.
특정 방식으로 표시하려면 Component.ts에 함수를 작성하고 호출 할 HTML 태그에 바인딩 할 수 있습니다.
희망 사항이 귀하의 질문에 대한 답변입니다.