Question

输入字段和按钮位于其上的父组件。

<mat-form-field class="example-full-width">
    <input matInput placeholder="Contractor" formControlName="SPR_CONTRACTORS_ID" required>
    <button mat-button color="primary" matSuffix (click)="openDialog()">Add</button>
</mat-form-field>

此组件用于添加数据（还有其他输入字段）。使用此表单添加数据。

  initializeForm() {
    if (this.data.action == 'add') {
      this.form = new FormGroup({
        LOGIN: new FormControl(null, [Validators.required]),
        PASSWORD: new FormControl(null, [Validators.required, Validators.minLength(8)]),
        FIO: new FormControl(null, [Validators.required]),
        ROLES_ID: new FormControl(null, [Validators.required]),
        EMAIL: new FormControl(null, [Validators.email]),
        PHONE: new FormControl(null, [Validators.minLength(11)]),
        SPR_CONTRACTORS_ID: new FormControl(null, [Validators.required])
      })
    }
  }

位于输入字段旁边的按钮应弹出一个对话框。

  openDialog() {
    let dialogRef = this.dialog.open(DialogContractorComponent, {
      height: '540px',
      width: '500px',
      data: { title: 'Contractors'}
    })
    dialogRef.afterClosed()
  }

在此对话框中是一个表。

<table mat-table [dataSource]="contractors" matSort matSortActive="CONTRACTOR_NAME" matSortDisableClear
    matSortDirection="asc">

    <ng-container matColumnDef="CONTRACTOR_NAME">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Contractor </th>
        <td mat-cell *matCellDef="let row"> {{row.contractor_name}} </td>
    </ng-container>

    <ng-container matColumnDef="CONTRACTOR_ID">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let row">
            <button mat-icon-button color="primary" (click)="selectContractor(row)" matTooltip="Select"
                [mat-dialog-close]>
                <mat-icon>add</mat-icon>
            </button>
        </td>
    </ng-container>

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

在每一行上都有一个按钮可供选择。单击它必须添加到父组件的输入字段中。我做了选择功能。

  selectContractor(row: Contractor) {
    this.selectedContractors = this.contractors.find(
      el => {
        return el.contractor_id === row
      }
    )
  }

现在如何将数据添加到输入字段？我不明白。有更准确的例子适合我吗？

Answer 1

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

<template>
  <v-layout
    column
    justify-center
    align-center
  >
    <v-flex
      xs12
      sm8
      md6
    >
    <vue-dropzone 
      ref="myVueDropzone" 
      id="dropzone" 
      :options="dropzoneOptions"
      @vdropzone-success="vdropzoneSuccess"
    >
    </vue-dropzone>
    <v-img 
      :src="imgUrl" 
    >
    </v-img>
    </v-flex>
  </v-layout>
</template>

<script>
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
import Cropper from 'cropperjs'

export default {
  data: function () {
    return {
      imgUrl:'',
      dropzoneOptions: {
          url: 'https://httpbin.org/post',
          thumbnailWidth: 150,
          maxFilesize: 0.5,
          headers: { "My-Awesome-Header": "header value" }
      }
    }
  },
  components: {
    vueDropzone: vue2Dropzone
  },
  methods:{
    vdropzoneSuccess(file, response){
      this.imgUrl = file.dataURL
      var image = new Image()
      image.src = URL.createObjectURL(file)
      console.log(image)
      var cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        crop(event) {
          console.log(event.detail.x)
          console.log(event.detail.y)
          console.log(event.detail.width)
          console.log(event.detail.height)
        },
      })
      console.log(cropper)
    }
  }
}
</script>

在组件之间传输数据？

1 个答案: