要求:
使用ngx-datatable显示动态数据,并使用页面ID使用分页
说明:
我有一个动态数据,在这里我使用ngx-datatable以角度显示它,这里一切正常,但问题是我不确定如何使用page_id(使用post body发送到服务器)应用分页。在这里,我将获得page_id以及API响应,这是第一个API调用。在这里,page_id必须作为主体发送,用于获取其余结果的相同API。
例如:假设我在1ST API调用中有20个结果,我将通过使用页面ID获得10条记录和一个页面ID,如何获得下10个结果
我实现了什么:
获取数据并将其显示在已应用的表基本分页中
下面是我的代码:
Result=[];
reorderable: boolean = true;
selected = [];
rows = [];
columns = [];
DataArray = [];
Results = {
"data": [
{
"_score": 0.36464313,
"_type": "data",
"_id": "abcd",
"_source": {
"filter": "data",
"information": {
"product_id": "abcd",
"creation_utctime": "1477335693653"
},
"enduser": "free"
},
"_index": "dell_laptop"
},
{
"_score": 0.36464314,
"_type": "data",
"_id": "abcde",
"_source": {
"filter": "data",
"information": {
"product_id": "abcde",
"creation_utctime": "1477335693653"
},
"enduser": "free"
},
"_index": …
Run Code Online (Sandbox Code Playgroud) 我有以下数据
[
{
"_id": "c9d5ab1a",
"subdomain": "wing",
"domain": "aircraft",
"part_id": "c9d5ab1a",
"info.mimetype": "application/json",
"info.dependent": "parent",
"nested": [
{
"domain": "aircraft",
"_id": "c1859902",
"info.mimetype": "image/jpeg",
"info.dependent": "c9d5ab1a",
"part_id": "c1859902",
"subdomain": "tail"
}
]
},
{
"_id": "1b0b0a26",
"subdomain": "fuel",
"domain": "aircraft",
"part_id": "1b0b0a26",
"info.mimetype": "image/jpeg",
"info.dependent": "no_parent"
}
]
Run Code Online (Sandbox Code Playgroud)
这里 if "info.dependent": "parent"
then 它是嵌套的,如果"info.dependent": "no_parent"
then 它没有孩子。我试图创建一个动态表,但我被困在如何使用嵌套表使其可折叠/可扩展。这是我在stackblitz 上的代码。
<mat-table class=" mat-elevation-z8" [dataSource]="dataSource">
<ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
<mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
<mat-cell *matCellDef="let element"> …
Run Code Online (Sandbox Code Playgroud) 在这里我试图从平面json创建一个嵌套的可扩展表
我做了什么 :
下面是平面json:
public unsortedData = [
{
"url": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
"_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
"part": "wing",
"main": "boeing",
"part_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
"information.data_check": "ad1bd2a7-710d-88aa-6da0-8de2140417c6"
},
{
"url": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
"_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
"part": "wing",
"main": "boeing",
"part_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
"information.data_check": "parent_info"
},
{
"url": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
"_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
"part": "wing",
"main": "boeing",
"part_id": "3b42eeee-c7e3-4d75-953e-941351b4e0f9",
"information.data_check": "single_info"
}
];
Run Code Online (Sandbox Code Playgroud)
并将其转换为嵌套的json,如下所示:
[
{
"nested": [
{
"url": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
"_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
"part": "wing",
"main": "boeing",
"part_id": "3452188c-a156-4ee4-b6f9-9d313bdbb148",
"information.data_check": "ad1bd2a7-710d-88aa-6da0-8de2140417c6"
}
],
"url": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
"_id": "ad1bd2a7-710d-88aa-6da0-8de2140417c6",
"part": "wing",
"main": "boeing",
"part_id": …
Run Code Online (Sandbox Code Playgroud) 这里我正在做的是我正在使用ng2文件上传创建一个"拖放功能",这里我的问题是,当我试图删除多个文件时,将启用选择所有功能,它将选择所有复选框默认但在文件丢弃后我的方案中没有发生这种情况
https://stackblitz.com/edit/angular-r6cbrj
<div class="container">
<div class="well well-lg metadata-well text-center add-file ">
<h4 style="float:left ">
<span *ngIf="uploader?.queue?.length> 1">
<input type="checkbox" id="selectAll" [(ngModel)]="selectAll" (change)="selectAllFiles($event)" class="form-check-input deltha">
</span>Add Files</h4>
<br />
<br />
</div>
<span *ngIf="uploader?.queue?.length== 0">
<p class="text-wrap">Your upload queue is empty.
<br />Drag and drop files to add them to the queue</p>
</span>
<span *ngIf="uploader?.queue?.length > 0">
<div class="upload-section">
<table class="table">
<tbody>
<tr *ngFor="let item of uploader.queue;let i = index">
<td style="padding-top: 0rem">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" …
Run Code Online (Sandbox Code Playgroud) 目标:我有一个名为“ feed data”的按钮,因此,每当我单击它时,都将加载数据,这意味着带有复选框的树在这里,我的要求是,当我将其与数据一起单击时,必须在init上选中所有复选框我尝试使用
this.treeComp.treeModel.doForAll((node: TreeNode) => node.setIsSelected(true));
Run Code Online (Sandbox Code Playgroud)
但是它不能正常工作是我的代码
click(tree: TreeModel) {
this.arrayData = [];
let result: any = {};
let rs = [];
console.log(tree.selectedLeafNodeIds);
Object.keys(tree.selectedLeafNodeIds).forEach(x => {
let node: TreeNode = tree.getNodeById(x);
// console.log(node);
if (node.isSelected) {
if (node.parent.data.name) //if the node has parent
{
rs.push(node.parent.data.name + '.' + node.data.name);
if (!result[node.parent.data.name]) //If the parent is not in the object
result[node.parent.data.name] = {} //create
result[node.parent.data.name][node.data.name] = true;
}
else {
if (!result[node.data.name]) //If the node is not in the object …
Run Code Online (Sandbox Code Playgroud) 在这里,我使用我的 json 和 angular2 - 树组件生成动态树结构,直到现在一切正常,当我们选择特定名称必须被选为对象的事件时,我无法生成选择事件广告,如果是孩子在那里,我尝试了这个 URL,在文档中我也没有找到任何获取选定值的方法,所以请建议我。
https://angular2-tree.readme.io/docs
下面是我的代码
options = {
useCheckbox: true
};
nodes;
data = {
"info": {
"laptop": {
},
"config": {
"properties": {
"ram": {
},
"processor": {
},
"hdd": {
}
}
},
"link": {
},
"name": {
},
"company": {
"properties": {
"model": {
},
"maker": {
"type": "integer"
},
"country": {
"type": "text"
},
"enterprise": {
}
}
}
}
};
check(){
const results = Object.keys(this.data.info).map(k => ({
name: k,
children: this.data.info[k].properties …
Run Code Online (Sandbox Code Playgroud) 我想导入一个资产文件夹中的Json文件,其中我具有以下URL:
config.json:
{
"url1": "https://jsonplaceholder.typicode.com/posts",
"url2" : "https://reqres.in/api/users",
"url3":"https://fakerestapi.azurewebsites.net/api/Authors"
}
Run Code Online (Sandbox Code Playgroud)
因此,我想对Json文件进行导入,而不是对URL进行硬编码,但是我不确定如何确切地做到这一点。
任何建议或方案,将不胜感激,以下是我的问题:
1.如何environment.ts
从那里导入Json文件,我将有一个使用api的服务
2.如果导入文件,则prod和loc dev
也必须相同
我想要的是:
我有一个配置文件,其中现在包含.json
存储在资产文件夹中的文件中包含一些URL的URL,而不是加载environments.prod
或.ts
,我要加载我的Json文件配置并基于要运行我的应用程序
我做了什么:
以下是我放在资产文件夹中的Json文件
{
"baseUrl": "https://jsonplaceholder.typicode.com/",
"baseUrl2": "https://reqres.in/api/users"
}
Run Code Online (Sandbox Code Playgroud)
ConfigServiceService.ts 用于存储配置文件
public _config: Object;
constructor(public http:Http) { }
getData(){
debugger;
return this.http.get("./assets/config.json").pipe(map(res => res.json()));
}
Run Code Online (Sandbox Code Playgroud)
之后,我创建一个 ServiceProviderService.ts来调用服务文件
configData:any;
constructor(public http:Http,public config:ConfigServiceService) {
}
jsonData(){
debugger;
return this.configData;
}
ngOnInit(){
debugger;
this.config.getData().subscribe(res =>{
console.log(res);
this.configData = res;
});
}
Run Code Online (Sandbox Code Playgroud)
app.component.ts
title = …
Run Code Online (Sandbox Code Playgroud) 我在嵌套的json结构中具有如下所示的动态json
{
"data": [
{
"_score": 0.5753642,
"_type": "data",
"_id": "686",
"_source": {
"mainData": "subset",
"data": "vehicle",
"name": "subset_vehicle",
"fields": [
"number",
"id",
"chasis"
],
"dataset": "chasis"
},
"_index": "vehicle"
},
{
"_score": 0.575,
"_type": "data",
"_id": "687",
"_source": {
"mainData": "subset1",
"data": "vehicle1",
"name": "subset_vehicle1",
"fields": [
"number",
"id",
"chasis"
],
"dataset": "chasis1"
},
"_index": "vehicle"
},
{
"_score": 0.57,
"_type": "data",
"_id": "686",
"_source": {
"mainData": "subset",
"data": "vehicle",
"name": "subset_vehicle",
"fields": [
"number",
"id",
"chasis"
],
"dataset": …
Run Code Online (Sandbox Code Playgroud) 这里是我的问题,我无法从登录页面隐藏页眉和页脚。在这里,我在 app.html 和登录页面和主页中有一个通用的页眉和页脚。没有登录,它不必显示导航,但我仍然在身份验证之前获得导航
下面是我的代码
<nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey">
<div class="container">
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav navbar-right landing-nav-text ul-right">
<li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
<li><a href="#features">Features</a></li>
<li><a href="#info">info</a></li>
<li><a href="#demo">Demo</a></li>
<li><a href="#demo1">Demo1</a></li>
<li><a href="#demo2">Demo2</a></li>
<li><a href="#demo3">Demo3</a></li>
</ul>
</div>
</div>
<a (click)="Logout()" class="logout">
Logout
</a>
</nav>
<router-outlet><router-outlet>
<div class="footer">
<div class="main_content">
<div class="footer_links_end">
<p>This is footer</p>
<p>
<a href="https://twitter.com">Twitter</a>
<a href="https://www.linkedin.com">Linkedin</a>
</p>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
请检查此堆栈是否有问题