將值從模態形式傳遞給 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