Angular 11 Выпадающий выбор по значению внутри таблицы html при загрузке страницы не удалось

Я хочу загрузить раскрывающийся список внутри таблицы HTML по значению при загрузке страницы. И будет работать с измененным значением пользователя при отправке формы. Следовательно, мне нужно, чтобы ngModel работал. Но без ngModel он работает нормально. Когда я устанавливаю ngModel, он не работает. я нуждаюсь

  1. Выберите раскрывающийся список по значению из файла машинописного текста.
  2. Получить все измененные значения раскрывающегося списка при отправке формы.

Для лучшего понимания проблемы см. StackBlitz

 <form>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group has-feedback">
                    <label class="control-label">First Name</label>
                    <input class="form-control" placeholder="First Name" type="text" [(ngModel)]="stdSubMap.first_name" name="first_name">
                    <span class="fa fa-user form-control-feedback" aria-hidden="true"></span> </div>
                </div>             
                <div class="col-md-12">
                  <button type="button" class="btn btn-success" (click)="Add()" >Add</button>                  
                </div>
                <div class="col-md-6" style="margin-top: 20px;">
                  <table class="table table-hover" >
                    <thead>
                    <tr>
                      <th><input type="checkbox"></th>
                      <th>Is Fourth Subject</th>
                      <th>Subject Name</th>
                    </tr>
                  </thead>
                  <tbody *ngFor="let row of rowList;let i=index">
                    <tr>
                      <td><input type="checkbox"></td>
                      <td>{{row.fourthSubject}}</td>
                      <td  >
                        <select class="form-control custom-select" [(ngModel)]="stdSubMap.student_subject[i]"  name="student_subject">
                          <option *ngFor="let sub of subjectList"  
                          [value]="sub.id" 
                          [selected]="sub.id==row.fourthSubject">{{sub.name}}</option>     
                        </select>    
                        </td>
                    </tr>
                    
                  </tbody>
                  </table>
                </div>
                
               
                 </div>
              </form> 

              <div>
                <pre>{{stdSubMap | json }}</pre>
              </div>
rowList:any;
  subjectList:any;
  organizationList:any;
  stdSubMap:SearchSubjectStudentMap=new SearchSubjectStudentMap();
  constructor() { }

  ngOnInit(): void {
    this.stdSubMap.student_subject=[];    
    this.LoadRowList();
    this.LoadSubjectList();
  }
  
  LoadRowList()
  {
    this.rowList=[];
    
    let row= {} as tableRow;
    row.fourthSubject =3;
    //row.Subject=[];
    //row.Subject[0]=1;
    this.rowList.push(row);


    row= {} as tableRow;
    row.fourthSubject =2;
    //row.Subject=[];
   // row.Subject[1]=3;
    this.rowList.push(row);

  }

  LoadSubjectList()
  {

    this.subjectList=[];
    let subject = {} as SubjectName;
    subject.id = 1;    
    subject.name = "Bangla";    

    this.subjectList.push(subject);

    let subject1 = {} as SubjectName;

    subject1.id = 2;
    subject1.name = "English";    
    this.subjectList.push(subject1);

    let subject2 = {} as SubjectName;

    subject2.id = 3;
    subject2.name = "Math";    
    this.subjectList.push(subject2);

  }

  Add()
  {
    let subject = {} as tableRow;
    subject.fourthSubject = 3;
    subject.Subject=3;
    this.rowList.push(subject);
  }
  
  Save()
  {
    
  }

кажется, в stackblitz вы добавили ngmodel, и он работает !!!   —  person Syed Md. Kamruzzaman    schedule 01.02.2021

См. также:  SCSS Mixin с использованием корневого селектора

Спасибо за ответ. Но я хочу также выбрать раскрывающийся список при загрузке страницы   —  person Syed Md. Kamruzzaman    schedule 01.02.2021

{{sub.name}} я не могу найти ни одной переменной или константы с именем sub   —  person Syed Md. Kamruzzaman    schedule 01.02.2021

Его ‹option * ngFor = let sub of subjectList   —  person Syed Md. Kamruzzaman    schedule 01.02.2021

Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. Syed Md. Kamruzzaman

    После долгих попыток, наконец, я пришел к решению.

    В машинописном тексте:

    this.stdSubMap.student_subject=[3,2];  // which dropdown value want to select
    

    В HTML:

     <select class="form-control custom-select" 
            [(ngModel)]="stdSubMap.student_subject[i]"  
            name="student_subject{{i}}">
        <option *ngFor="let sub of subjectList" [value]="sub.id">{{sub.name}}</option>     
     </select>    
    

    Вот рабочий код: StackBlitz

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: