将值从模态形式传递给 Angular 中的数组

Question

我正在使用引导模式从用户那里获取各种输入，并将其传递到 Angular 中已经存在的字符串数组中。 好像不行怎么办？ 这是代码

export class App {

    myform: FormGroup;
    events: any[] = [{
    Name:"Workout",
    Time:"6:00 am",
    Location:"Newton Park",
    Description:"Health is Wealth.",
    Agenda:"300cAl burn."
  },
  {
    Name:"Product review",
    Time:"10:30 am",
    Location:"TCS Sipcot",
    Description:"Reviewing the new version of the existing project.",
    Agenda:"Fulfill client's requirements."
  },
  {
    Name:"Meeting",
    Time:"6:00 pm",
    Location:"Taj Residency",
    Description:"Very useless meeting, Could be emailed as well.",
    Agenda:"Same fking boot licking"
  }];
  
  summary: any = {
  weather: "Cloudy",
  temperature: "30⁰C",
  forecast: "Maximum temperature today near 30 degrees. A partly cloudy and warm day is expected. Lowest relative humidity near 33 percent. Expect 13 hours of sunshine, which is 87 percent of possible sunshine. Average winds will be Northeast at 8 MPH during the morning and Northeast at 9 MPH during the afternoon."
  };
  
  addEvent(data):void {
    this.events.push({
      Name:data.Name, 
      Time:data.Time, 
      Location:data.Location, Description:data.Description, Agenda:data.Agenda});
  }
  heading: string;
 
  constructor(private router: Router) {}
  ngOnInit() {
   this.myform = new FormGroup({
    this.events.Name = new FormControl(),
    this.events.Time = new FormControl(),
    this.events.Location = new FormControl(),
    this.events.Description = new FormControl(),
    this.events.Agenda = new FormControl()
   });
  }

应用程序.html

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Add Event</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form novalidate [formGroup]="myform" (ngSubmit)="addEvent()">
          <div class="form-group">
            <label for="time" class="col-form-label">Time:</label>
            <input type="text" class="form-control" id="time" formControlName="Time">
          </div>
          <div class="form-group">
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="name" formControlName="Name">
          </div>
          <div class="form-group">
            <label for="locate" class="col-form-label">Location:</label>
            <input type="text" class="form-control" id="locate" formControlName="Location">
          </div>
          <div class="form-group">
            <label for="agenda" class="col-form-label">Agenda:</label>
            <input type="text" class="form-control" id="locate" formControlName="Agenda">
          </div>
          <div class="form-group">
            <label for="desc" class="col-form-label">Description:</label>
            <textarea class="form-control" id="desc" formControlName="Description"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" data-dismiss="modal">Add event</button>
      </div>
    </div>
  </div>
</div>

我在 ngOnit() 中遇到在线问题，所以我认为如何访问数组属性有问题。 如果还有其他不使用 formmodule 的方法，请告诉我。

Answer 1

试试这种方式：在 component.ts

    export class App implements OnInit{
    myform: FormGroup;
    events: any[] = [{
    Name: "Workout",
    Time: "6:00 am",
    Location: "Newton Park",
    Description: "Health is Wealth.",
    Agenda: "300cAl burn."
  },
  {
    Name: "Product review",
    Time: "10:30 am",
    Location: "TCS Sipcot",
    Description: "Reviewing the new version of the existing project.",
    Agenda: "Fulfill client's requirements."
  },
  {
    Name: "Meeting",
    Time: "6:00 pm",
    Location: "Taj Residency",
    Description: "Very useless meeting, Could be emailed as well.",
    Agenda: "Same fking boot licking"
  }];

  summary: any = {
    weather: "Cloudy",
    temperature: "30⁰C",
    forecast: "Maximum temperature today near 30 degrees. A partly cloudy and warm day is expected. Lowest relative humidity near 33 percent. Expect 13 hours of sunshine, which is 87 percent of possible sunshine. Average winds will be Northeast at 8 MPH during the morning and Northeast at 9 MPH during the afternoon."
  };

  addEvent(data): void {
    console.log(data);
    
    this.events.push({
      Name: data.Name,
      Time: data.Time,
      Location: data.Location, Description: data.Description, Agenda: data.Agenda
    });
  }
  heading: string;

  constructor(private router: Router) { }
  ngOnInit() {
    this.myform = new FormGroup({
      Name: new FormControl(),
      Time: new FormControl(),
      Location: new FormControl(),
      Description: new FormControl(),
      Agenda: new FormControl()
    });
  }

}

在 HTML 中：

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">Add Event</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form  [formGroup]="myform" (ngSubmit)="addEvent(myform.value)">
          <div class="form-group">
            <label for="time" class="col-form-label">Time:</label>
            <input type="text" class="form-control" id="time" formControlName="Time">
          </div>
          <div class="form-group">
            <label for="name" class="col-form-label">Name:</label>
            <input type="text" class="form-control" id="name" formControlName="Name">
          </div>
          <div class="form-group">
            <label for="locate" class="col-form-label">Location:</label>
            <input type="text" class="form-control" id="locate" formControlName="Location">
          </div>
          <div class="form-group">
            <label for="agenda" class="col-form-label">Agenda:</label>
            <input type="text" class="form-control" id="locate" formControlName="Agenda">
          </div>
          <div class="form-group">
            <label for="desc" class="col-form-label">Description:</label>
            <textarea class="form-control" id="desc" formControlName="Description"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" data-dismiss="modal">Add event</button>
          </div>
        </form>
      </div>
      
    </div>
  </div>
</div>

演示： StackBlitz