Question

当我单击按钮时，我试图使Angular Material数据表在行上展开。这是我的代码和stackblitz示例。目前，它在列中展开，但是当用户单击切换按钮时，我正在尝试扩展行。

HTML

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">    
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
  </ng-container>

  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> City </th>
    <td mat-cell *matCellDef="let element"> {{element.location.city}} </td>
  </ng-container>

  <ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef> Start Date </th>
    <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
  </ng-container>

  <ng-container matColumnDef="deviceType">
    <th mat-header-cell *matHeaderCellDef> Device Type </th>
    <td mat-cell *matCellDef="let element"> {{element.deviceType}} </td>
  </ng-container>

  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef> Status </th>
    <td mat-cell *matCellDef="let element"> {{element.status}} </td>
  </ng-container>

  <ng-container matColumnDef="expand">
    <th mat-header-cell *matHeaderCellDef> View More </th>
    <td mat-cell *matCellDef="let element; let i = index">
      <div class="example-element-detail" (click)="toggleFloat(i)">View</div>
      <div *ngIf="expanded[i] == true"> {{element.contributorProfiles}} </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

TS

dataSource看起来像这样

[
  {
    "title": "bob",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "asdas",
    "locationId": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
    "startDate": "2020-07-08T00:00:00.000+0000",
    "endDate": "2020-07-10T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 22,
    "accreditationRequired": false,
    "accreditationReason": null,
    "subjects": "test",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "b6b99931-c6a3-476a-8c3a-9e2535823c13",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
      "country": "Bhutan",
      "city": "Lhuentse"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  },
  {
    "title": "tester kalpesh",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "123",
    "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
    "startDate": "2020-06-24T00:00:00.000+0000",
    "endDate": "2020-07-03T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 55,
    "accreditationRequired": false,
    "accreditationReason": "none",
    "subjects": "55",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "3fdf9972-9b21-4a6e-b650-4141f5c6809e",
    "status": "Assigned",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
      "country": "South Africa",
      "city": "Johannesburg"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": [
      {
        "id": "95ac8466-8d98-47ab-95f8-24eb7b7cc27b",
        "email": "kalpesh@mithal.co.za",
        "firstname": "Kalpesh",
        "surname": "Mithal",
        "cell": "0884441122",
        "appliedStatus": "Created"
      }
    ]
  }
]

Stackblitz示例在这里

https://stackblitz.com/edit/angular-hvcf5z

Answer 1

尝试一下，希望对您有所帮助。在您首先丢失了“ multiTempalteDataRows” 第二列定义使用此

    from xgboost import XGBRegressor
import numpy as np
import pandas as pd
from sklearn.preprocessing import StandardScaler, MinMaxScaler, RobustScaler
from sklearn.model_selection import train_test_split
from sklearn.metrics import mean_squared_error
import os
import pprint
import plotly.express as px
import plotly.graph_objects as go
import webbrowser
from math import sqrt
import matplotlib.pyplot as plt

# * load the data
li = []
for file in os.listdir('.\\emission_data'):
    imp = pd.read_csv(f'.\\emission_data\\{file}', index_col=None, header=0)
    li.append(imp)

df1 = pd.concat(li, axis=0, ignore_index=True)


df1.plot(subplots=True, layout=(6, 2))
plt.show()
# print(df1.head)

# * split into X and Y
X = df1.iloc[:, 0:10]
Y = df1.iloc[:, 10]
# print(X.shape, Y.shape)

# * split sets
split = 0.6

Xtrain, Xtest = X.iloc[:int(len(X.index)*split),
                       :], X.iloc[int(len(X.index)*split):, :]
# print(Xtrain.shape, '\t', Xtest.shape)
Ytrain, Ytest = Y.iloc[:int(len(Y.index)*split)
                       ], Y.iloc[int(len(Y.index)*split):]
# print(Ytrain.shape, '\t', Ytest.shape)

#! converting target to numpy array and rehaping since scalerneeds it that way
Ytrain = Ytrain.to_numpy()
Ytrain = Ytrain.reshape((-1, 1))

# * scale train X, Y and test X
rbsxt = RobustScaler()
rbsyt = RobustScaler()
rbsxte = RobustScaler()

Xtrain = pd.DataFrame(rbsxt.fit_transform(
    Xtrain), index=Xtrain.index, columns=Xtrain.columns)
Ytrain = pd.DataFrame(rbsyt.fit_transform(
    Ytrain))  # , index=Ytrain.index, columns=Ytrain.columns)
Xtest = pd.DataFrame(rbsxte.fit_transform(
    Xtest), index=Xtest.index, columns=Xtest.columns)

model = XGBRegressor()

model.fit(Xtrain, Ytrain)

ypred = model.predict(Xtest)
ypred = ypred.reshape((-1, 1))

ypred = rbsyt.inverse_transform(ypred)
rmse = sqrt(mean_squared_error(Ytest, ypred))
print(rmse)


# fig = px.line(Ytest,  title='Ytest')
Ytest_np = Ytest.to_numpy()
ypred = ypred.flatten()

fig = go.Figure()
fig.add_trace(go.Scatter(y=Ytest_np,
                         mode='lines',
                         name='Ytest'))
fig.add_trace(go.Scatter(y=ypred,
                         mode='lines',
                         name='ypred'))
fig.write_html(f'.\\Ytest.html')

new = 2
chromepath = 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe %s'
webbrowser.get(chromepath).open(f'.\\Ytest.html', new=new)

最后添加第三行以获取详细信息

displayedColumns = ['title','location','startDate','deviceType','status', 'more'];

HTML

<tr mat-row *matRowDef="let row; columns: ['expanded']" class="example-detail-row"></tr>

单击按钮展开“角度材料”行

1 个答案: