Как показать viewValue выбранной опции после сохранения ее значения в базе данных? - PullRequest
Новая
       24

Как показать viewValue выбранной опции после сохранения ее значения в базе данных?

0 голосов
/ 16 апреля 2019

В моем приложении есть два компонента: «Добавить» и «Список».На странице добавления html есть mat-select, который загружает список из компонента ts, показывая «viewValue» и сохраняя в базе данных выбранное «значение».При перечислении сохраненных записей на странице «Список», мне нужно перезагрузить «viewValue» из сохраненного «значения», загруженного из базы данных.

В настоящее время мне это нужно для того, чтобы сделать мгновенный перевод показанного списка.

Вот код компонентов «Добавить» и «Список»:

// addArticle.component.ts: 

export class AddArticleComponent implements OnInit {
  public publicationsForm: FormGroup;

  typePublications = [
    { value: 'report', viewValue: 'ADMIN.LAYOUT.ARTICLES.0.SELECT_OPTIONS.TYPE.REPORT' },
    { value: 'document', viewValue: 'ADMIN.LAYOUT.ARTICLES.0.SELECT_OPTIONS.TYPE.DOCUMENT' },
    { value: 'news', viewValue: 'ADMIN.LAYOUT.ARTICLES.0.SELECT_OPTIONS.TYPE.NEWS' },
    { value: 'tools', viewValue: 'ADMIN.LAYOUT.ARTICLES.0.SELECT_OPTIONS.TYPE.TOOLS' },
    { value: 'misc', viewValue: 'ADMIN.LAYOUT.ARTICLES.0.SELECT_OPTIONS.TYPE.MISC' },
  ];
}

// addArticle.component.html:

      <mat-form-field class="full-width">
        <mat-select name="type" [formControl]="publicationsForm.controls['type']" placeholder="{{ 'ADMIN.LAYOUT.ARTICLES.0.ADD_ARTICLES.TYPE' | translate }}" class="mb-1">
          <mat-option *ngFor="let t of typePublications" [value]="t.value" ngDefaultControl>
            {{ t.viewValue | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>

// listArticles.component.ts 

  getItems() {
    if (this.userData.type_user === "superAdmin {
      this.api.getArticles().then(data => {
        this.items = data;
      });
    } else if (this.userData.type_user === "admin") {
      this.api.getArticlesByUser(this.idUser).then(data => {
        this.items = data;
      });
    } else if (
      this.userData.type_user !== "superAdmin" &&
      this.userData.type_user !== "admin
    ) {
      this.api.getArticlesByEntity(this.userData.entity.idEntity).then(data => {
        let res: any = data;
        let articles: any = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].status === true) articles.push(res[i]);
        }
        this.items = articles;
      });
    }
  }

// listArticles.component.html: 

<mat-card class="p-0" [@animate]="{value:'*',params:{y:'50px',delay:'300ms'}}" [dir]="translate.currentLang === 'ar' ? 'rtl' : 'ltr'">
  <mat-card-content class="p-0">
    <ngx-datatable class="material ml-0 mr-0" [rows]="items" [columnMode]="'flex'" [headerHeight]="50"
      [footerHeight]="50" [limit]="10" [rowHeight]="'auto'" [messages]="{ emptyMessage: 'ADMIN.LAYOUT.ARTICLES.0.TABLE_FOOTER.NO_RESULTS' | translate, totalMessage: 'ADMIN.LAYOUT.ARTICLES.0.TABLE_FOOTER.RESULTS' | translate }">
      <ngx-datatable-column [canAutoResize]="true" [flexGrow]="2">
        <ng-template let-column="column" ngx-datatable-header-template>
          <span>{{ 'ADMIN.LAYOUT.ARTICLES.0.TABLE_HEADER.TITLE' | translate }}</span>
        </ng-template>
        <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.title }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column [canAutoResize]="true" [flexGrow]="1">
          <ng-template let-column="column" ngx-datatable-header-template>
            <span>{{ 'ADMIN.LAYOUT.ARTICLES.0.TABLE_HEADER.TYPE' | translate }}</span>
          </ng-template>
          <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.type }}
        </ng-template>
      </ngx-datatable-column>

Что я хотел бы сделать,в столбце типа что-то вроде (сохранение массива выбранной опции с ее значением и ViewValue в базе данных): 

      <ngx-datatable-column [canAutoResize]="true" [flexGrow]="1">
          <ng-template let-column="column" ngx-datatable-header-template>
            <span>{{ 'ADMIN.LAYOUT.ARTICLES.0.TABLE_HEADER.TYPE' | translate }}</span>
          </ng-template>
          <ng-template let-row="row" ngx-datatable-cell-template>
          {{ row?.type.viewValue | translate }}
<!-- so i can show viewValue and then apply the translate pipe to it. I can't change the module to have a new table storing the selected object -->
        </ng-template>
      </ngx-datatable-column>
...