Question

我需要重新排列从Firebase检索到的数组，并且我的搜索思路用光了-我不太确定我在寻找什么技术。

我有一个firebase项目，其中每个用户的报告都存储在以其Firebase身份uid命名的文档下。

reports{
        uid{
           reports[
                   {county: "Tipp", dateAdded: "06-10-19 21:2, ...}
                   {county: "Clare", dateAdded: "06-10-19 21:2, ...}
                   {county: "Cork", dateAdded: "06-10-19 21:2, ...}
                  ]
            }
       }

我在Mat表格中显示此内容，但删除条目时出现问题。我需要将UID传递给删除功能。

使用此功能，我可以同时获取UID和报告。

this.reports =  docs.map(item => {

    return {
      id:  item.payload.doc.id,
      ...item.payload.doc.data()
    };

  });

这会将“报告”数组设置为：

[
 {id: "5d0GSzovaSekAnHirJyjZ5hob202",
  reports[
         {county: "Laois", dateAdded: "06-10-19 21:2", ...},
         {county: "Clare", dateAdded: "06-10-19 21:2", ...},
         {county: "Cork", dateAdded: "06-10-19 21:2", ...}
         ]
  },
  {id: "IIqnl2Ff1VZQ5bv7qsLPnuhqlC03",
  reports[
         {county: "Kerry", dateAdded: "06-10-19 21:2", ...}
         ]
  },
  {id: "zspHtczidfVfjgWF6mPJKMfwvjy2",
  reports[
         {county: "Kilkenny", dateAdded: "06-10-19 21:2", ...},
         {county: "Louth", dateAdded: "06-10-19 21:2", ...}
         ]
  }

使用下面的此功能，我可以将每个元素推入数组以很好地用作Mat表的数据源，但是问题是-我最终丢失了UID。

this.reports.forEach(element => {
    this.finalReports.push(...element.reports);
  });

finalReports数组的输出，我目前在表中显示

[
{county: "Laois", dateAdded: "06-10-19 21:2", ...}, 
{county: "Clare", dateAdded: "06-10-19 21:2", ...},
{county: "Cork", dateAdded: "06-10-19 21:2", ...},
{county: "Kerry", dateAdded: "06-10-19 21:2", ...},
{county: "Kilkenny", dateAdded: "06-10-19 21:2", ...},
{county: "Louth", dateAdded: "06-10-19 21:2", ...}
]

我正在寻找一种方法来将每个元素所属的UID与数据一起存储在finalReports数组中，因此它很容易用作MatTableDataSource-并且还很容易从Firebase中删除。我计划使用filterPredicate()忽略搜索/过滤器功能中的UID。

我正在寻找的MatTableDataSource的布局是这样的：

[
 {id: 5d0GSzovaSekAnHirJyjZ5hob202, report: {county: "Laois", dateAdded: "06-10-19 21:2", ...}}, 
 {id: 5d0GSzovaSekAnHirJyjZ5hob202, report: {county: "Clare", dateAdded: "06-10-19 21:2", ...}},
 {id: 5d0GSzovaSekAnHirJyjZ5hob202, report: {county: "Cork", dateAdded: "06-10-19 21:2", ...}},
 {id: IIqnl2Ff1VZQ5bv7qsLPnuhqlC03, report: {county: "Kerry", dateAdded: "06-10-19 21:2", ...}},
 {id: zspHtczidfVfjgWF6mPJKMfwvjy2, report: {county: "Kilkenny", dateAdded: "06-10-19 21:2", ...}},
 {id: zspHtczidfVfjgWF6mPJKMfwvjy2, report: {county: "Louth", dateAdded: "06-10-19 21:2", ...}},
]

这样，我可以像在表中那样使用它，

<td mat-cell *matCellDef="let row">{{row.reports.county}}</td>

，希望这在删除...时会起作用...

***Home.ts***

<td mat-cell *matCellDef="let row"><button mat-raised-button 
(click)="deleteReport(row)">Delete</button></td>

***firebase.service.ts***

deleteReport(row){

this.db.collection('newLayout').doc(row.id).update({
  "reports": firebase.firestore.FieldValue.arrayRemove(row.report)
});

我要使用的MatTableDataSource布局和filterPredicate()函数的示例可以在以下stackblitz处看到：Mat table stackblitz

任何帮助，想法或技巧将不胜感激！

Answer 1

该功能将给您希望的搜索结果

_charController.Move

它将给您这样的结果

private mapReports(reports: any) {
    const finalReports = [];
    reports.flatMap(entry => finalReports.push(...entry.reports.map(report => ({id: entry.uid, ...report}))));
    reports = finalReports;
}

编辑

如果要在自己的对象中创建报表，则可以删除价差运算符：

{id: 20, county: "Tipp", dateAdded: "06-10-19 21:2, ..."}

打字稿数组操作/拼合

1 个答案: