Question

我正在使用给定的方法将项目推入名为Edudata的数组中。推送数据时，名为isSuccessful的布尔变量变为true

当推送数据时，名为isSuccessful的布尔变量变为true。在客户端，我检查了ngif条件，是否成功生成了真表

saveEducation(educ: Education) {
this.eduData.push(educ);
this.isSuccessful = true;
}


<table class="table-responsive" *ngIf="isSuccessful">
<button mat-raised-button color="Primary" 
(click)="saveEducationtoTable(education)">Add</button>
<table class="table-responsive"  *ngIf="isSuccessful">
<thead>
<tr>
<th>
Degree Name
</th>
<th>
 Institute Name
</th>
<th>
Start Date
</th>
<th>
 End Date
</th>
<th>


   <td class="td-input">
          <mat-label class="label-margin">Select Degree</mat-label>
    </td>
    <td>
        <mat-select name="degree" [(ngModel)]="education.degree_Name" 
 placeholder="--Select Degree--"
       required>
            <mat-option value="No formal education">No formal 
education</mat-option>
            <mat-option value="Primary education">Primary education</mat- 
option>
            <mat-option value="Secondary education">Secondary education or 
high school</mat-option>
            <mat-option value="Vocational qualification">Vocational 
qualification</mat-option>
            <mat-option value="Bachelor's degree">Bachelor's degree (14 
years)</mat-option>
            <mat-option value="Bachelor's degree">Bachelor's degree (16 
years)</mat-option>
            <mat-option value="Master's degree">Master's degree</mat-option>
            <mat-option value="Doctorate or higher">Doctorate or 
  higher</mat-option>
          </mat-select>

    </td>
  </tr>
  </table>
  </mat-form-field>
  <!-- Choose Start Date For Degree Date Picker -->
  <mat-form-field class="inputClass">
<table class="inputClass">
 <tr>
 <td class="td-input">
  <mat-label class="label-margin">Start Date</mat-label>
 </td>
 <td>

        <input matInput  [matDatepicker]="pickerStart" name="start_Date" 
  placeholder="Choose a Start date" 
  [(ngModel)]="education.start_Date"required disabled>
        <mat-datepicker-toggle matSuffix [for]="pickerStart" required> 
       </mat- 
   datepicker-toggle>
        <mat-datepicker #pickerStart disabled="false" required></mat- 
 datepicker>

</td>
 </tr>
 </table>
<!-- Choose End Date For Degree Date Picker -->
 </mat-form-field>
 <mat-form-field class="inputClass">
  <table class="inputClass">
    <tr>
      <td class="td-input">
        <mat-label class="label-margin">End Date</mat-label>
      </td>
      <td>
              <input matInput  
        [matDatepicker]="pickerEnd"name="start_Date" 
    placeholder="Choose a End date"[(ngModel)]="education.end_Date" 
  required 
  disabled>
              <mat-datepicker-toggle matSuffix [for]="pickerEnd"required> 
  </mat-datepicker-toggle>
              <mat-datepicker #pickerEnd disabled="false"required></mat- 
  datepicker>

      </td>
    </tr>
    </table>
    </mat-form-field>
 <!-- Select Institute dropdown -->
  <mat-form-field class="inputClass">
<table class="inputClass">
  <tr>
    <td class="td-input">
      <mat-label class="label-margin">Select Institution</mat-label>
    </td>
    <td>
        <mat-select name="institution" 
     [(ngModel)]="education.Institution_Name" placeholder="--Select 
       Institution--" required>
            <mat-option value = "NUST" >NUST</mat-option>
            <mat-option value = "IIUI">IIUI</mat-option>
          </mat-select>
         </td>
       </tr>
      </table>
     </mat-form-field>

现在，当生成表时，我想再次使isSuccessful为false。这样，当用户第二次将数据输入数组时，isSuccessful应该为true，否则为false

Answer 1

根本不需要这样做。如果将isSuccessful设置为false，您的表将消失，我认为您不想要！如果该表已绑定到控制器中的数据，则在推送新数据时将实时重新生成该表。

当用户单击添加时，您需要创建一个新的教育对象。像这样：

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|

  config.vm.box = "centos7"

  config.vm.network :private_network, ip: "192.168.33.3"
  config.vm.synced_folder "d:/workspace/www/", "/var/www"  

  config.vm.hostname = "vagrant-dev"


  config.ssh.username = 'root'
  config.ssh.password = 'vagrant'
  config.ssh.insert_key = 'true'

  config.vm.provider "virtualbox" do |vb|
    vb.cpus = 2
    vb.memory = "2048"
  end
end

Angular 7在客户端将布尔值true更改为false。 Angular应用程序的html页面

1 个答案: