如何在材料表中添加新行

Question

我已经下拉列表和一些输入类型字段，无论我在下拉列表中选择的内容是什么，我将在材料表中绑定/显示的输入框都写进去？

我已经完成了HTML代码，但是我尝试将数据与ngModel绑定在一起，但对我而言这不可能

User user = new User();
user.setUserName("test");
user.setUserRegisteredDate(CalendarUtil.getCurrentTimeStamp());
User savedUser = userRepository.save(user);
user.setCreatedBy(savedUser.getUserId());
userRepository.save(user);

TS文件代码：

    <mat-tab label="Offer Library" class="no-overflow">

      <div *ngIf="isOfferCreationScreen ; else NewOffer">

        <!-- Code for button tab -->
        <div class="-toolbar">
          <p>
            <mat-toolbar>
              <h4>Offers Creation</h4>
              <div class="row align-right col-md-offset-9">
                <button (click)="createExpression()" disabled mat-raised-button>
                  inActive
                </button>
                <button color="primary" disabled mat-raised-button>
                  Delete
                </button>
                <button mat-raised-button (click)="createNewOffer()" type="button">
                  Create New
                </button>
              </div>
            </mat-toolbar>
          </p>
        </div>

        <mat-table [dataSource]="offersColumnRowData" class="mat-table no-overflow">

          <ng-container matColumnDef="SELECT">
            <mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="NAME">
            <mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="CODE">
            <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="DESCRIPTION">
            <mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

            <ng-container matColumnDef="LEVEL 1">
            <mat-header-cell *matHeaderCellDef> LEVEL 1</mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

           <ng-container matColumnDef="LEVEL 2">
            <mat-header-cell *matHeaderCellDef> LEVEL 2</mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

            <ng-container matColumnDef="LEVEL 3">
            <mat-header-cell *matHeaderCellDef> LEVEL 2</mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>


             <ng-container matColumnDef="LEVEL 4">
            <mat-header-cell *matHeaderCellDef> LEVEL 2</mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

              <ng-container matColumnDef="LEVEL 5">
            <mat-header-cell *matHeaderCellDef> LEVEL 2</mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="CREATEDATE">
            <mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="ISACTIVE">
            <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="UNAME">
            <mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

          <ng-container matColumnDef="Active">
            <mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
            <mat-cell *matCellDef="let element"> </mat-cell>
          </ng-container>

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


      </div>
      <ng-template #NewOffer>


        <div class="window-pad-height no-overflow">
          <h4>New Offers</h4>

          <div class="row no-overflow">
            <div class="col-md-1 window-pad-height no-overflow">

              <!-- Write Offer Name here -->
              <mat-label> Name: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field>
                <input matInput placeholder="Name" [(ngModel)]="offerName" value="" [formControl]="control"
                  required>
                <mat-error *ngIf="control.invalid">{{getErrorMsg()}}</mat-error>
              </mat-form-field>
            </div>
          </div>
          <!-- Write offer Code Here -->
          <div class="row no-overflow">
            <div class="col-md-1 window-pad-height no-overflow">
              <mat-label> Code: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field>
                <input matInput placeholder="Code" value="">
              </mat-form-field>
            </div>
          </div>

          <!-- Write Offer Decription here -->
          <div class="row no-overflow">
            <div class="col-md-1 window-pad-height no-overflow">
              <mat-label> Description: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field appearance="outline" class="descriptionInput">
                <textarea matInput></textarea>
              </mat-form-field>
            </div>
          </div>

          <!-- level One  Offer for Drop Down -->
          <div class="row no-overflow">
            <div class="col-md-1 window-pad-height no-overflow">
              <mat-label> Level 1: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field class="no-overflow">
                <mat-select placeholder="select" [(ngModel)]="selectedOfferOne">
                  <mat-option *ngFor="let levelone of levelOneOffer" [value]="levelone">
                    {{levelone.viewValue}}

                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

          <!-- level Two  Offer for Drop Down -->
          <div class="row no-overflow">
            <div class="col-md-1  no-overflow">
              <mat-label> Level 2: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field class="no-overflow">
                <mat-select placeholder="select" [(ngModel)]="selectedOfferTwo">
                  <mat-option *ngFor="let leveltwo of levelTwoOffer" [value]="leveltwo">
                    {{leveltwo.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

          <!-- level Three Offer for Drop Down -->
          <div class="row no-overflow">
            <div class="col-md-1 no-overflow">
              <mat-label> Level 3: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field class="no-overflow">
                <mat-select placeholder="select" [(ngModel)]="selectedOfferThree">
                  <mat-option *ngFor="let levelthree of levelThreeOffer" [value]="levelthree">
                    {{levelthree.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>


          <!-- level Four Offer for Drop Down -->
          <div class="row no-overflow">
            <div class="col-md-1 no-overflow">
              <mat-label> Level 4: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field class="no-overflow">
                <mat-select placeholder="select" [(ngModel)]="selectedOfferFour">
                  <mat-option *ngFor="let levelfour of levelFourOffer" [value]="levelfour">
                    {{levelfour.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

          <!-- level Five Offer for Drop Down -->
          <div class="row no-overflow">
            <div class="col-md-1 no-overflow">
              <mat-label> Level 5: </mat-label>
            </div>
            <div class="col-md-2 no-overflow">
              <mat-form-field class="no-overflow">
                <mat-select placeholder="select" [(ngModel)]="selectedOfferFive">
                  <mat-option *ngFor="let levelfive of levelFiveOffer" [value]="levelfive">
                    {{levelfive.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>

          <!-- Select check box isActive -->
          <div class="row no-overflow window-pad-height">
            <div class="col-md-1 no-overflow ">
              <mat-checkbox>IsActive</mat-checkbox>
            </div>
          </div>
          <div class="window-pad-height">
            <div class="row col-md-3 no-overflow">

              <!-- back button for Offer Creation -->

              <button mat-flat-button color="primary" (click)="backtoOfferCreation()">Back</button>
            </div>

            <!-- Save Button for New Created Offer -->
            <div class="col-md-1 no-overflow">
              <button mat-flat-button color="primary" [disabled]=" offerName===''|| selectedOfferOne==='' || selectedOfferTwo==='' || selectedOfferThree===''
              ||selectedOfferFour===''|| selectedOfferFive==='' ">Save</button>
            </div>

            <div class="col-md-1 no-overflow">

              <!-- Move to Campaign Library Tab -->

              <button mat-flat-button color="primary" [disabled]=" offerName===''|| selectedOfferOne==='' || selectedOfferTwo==='' || selectedOfferThree===''
              ||selectedOfferFour===''|| selectedOfferFive===''">Next</button>
            </div>

          </div>

        </div>

      </ng-template>

  </mat-tab>

无论我输入什么输入类型，以及在下拉列表中选择的任何内容（应添加到mat表中）注意：每个输入类型和下拉列表均具有其NgModel

谢谢！

我的StackBlitz链接-https://stackblitz.com/edit/angular-gbf9kz-ubttae

Answer 1

如果您正在使用双向数据绑定，那么我建议您创建一个接口并将接口的属性绑定到 "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "sample:build", "proxyConfig": "proxy.conf.json" }

在组件中：

[(ngModel)]

在HTML中这样绑定：

export interface Employee {
  name: string
  id:string
}

因此，<mat-form-field class="example-full-width"> <input matInput placeholder="Name" [(ngModel)]="employee.name"> // here </mat-form-field> <mat-form-field> <mat-select [(ngModel)]="employee.id"> <mat-option>None</mat-option> <mat-option value="1">Option 1</mat-option> <mat-option value="3">Option 2</mat-option> <mat-option value="6">Option 3</mat-option> </mat-select> </mat-form-field> 函数的代码更少，因为您只需添加员工对象即可列出和刷新数据源：

Component.TS代码：

addNew()

因此，如果有任何新字段，只需将Interface和HTML添加到import { MatTableDataSource } from '@angular/material'; // import this export interface Employee { name: string id:string } employee : Employee = { id :"", name :"" }; /// This could refactor displayedColumns: string[] = ['name', 'id']; dataSource = new MatTableDataSource(ELEMENT_DATA); addNew(){ ELEMENT_DATA.push(this.employee) this.dataSource = new MatTableDataSource(ELEMENT_DATA); this.employee = { id :"", name :"" }; /// This could refactor } 。

WORKING DEMO

Answer 2

我遇到了MatTableDataSource的同样问题。这是我修改ts函数以添加新行的内容。

这是TS文件的Elements类和addRow函数的属性

export class Elements {
  position : number;
  picker : Date;
  teaMaking : boolean;
  yoga : boolean;

}
const ELEMENT_DATA: Elements[] = [];
dataSource = new MatTableDataSource<Elements>(ELEMENT_DATA);

addRow(){
this.dataSource.data.push({position : this.dataSource.data.length + 1, picker 
: new Date(),teaMaking: false, yoga : false});

return this.dataSource.filter = "";
}

对于完整的项目，您可以从github下载Activities项目 https://github.com/sudipkj/Angular9.git