Question

Angular 4。

我需要帮助来设置mat-select的选项，所以这就是问题所在：

1.首先我得到两个变量：options和checkedOptions

options: string[];
checkedOptions: string[] //This comes from the BD;

2.So选项是所有选项，checkedOptions来自BD，如下所示：

options = ["o1", "o2", "o3", "o4", ... "oN"]
checkedOptions = ["o2", "o4"]

3.我打印如下选项：

<mat-form-field floatPlaceholder="always" color="accent" class="input-all">
  <mat-select multiple placeholder="{{ par.label }}">
    <mat-option *ngFor="let op of options" [value]="op">{{ op }}</mat-option>
  </mat-select>
</mat-form-field>

所以在mat-select中是所有选项......但我想要的是，在options列表中，只需检查checkedOptions列表中的哪些内容。我该怎么做？

请帮忙。

Answer 1

在这种情况下，您必须在mat-select-tag中使用ngModel并将其绑定到您的选择列表。这是解决方案：

HTML

        //Record Video
        let log = console.log.bind(console),
          id = val => document.getElementById(val),
          ul = id('ul'),
          start = id('startRecord'),
          stop = id('stopRecord'),
          stream,
          recorder,
          counter=1,
          chunks,
          media;

        start.onclick = e => {
            let mv = id('mediaVideo'),
                mediaOptions = {
                    video: {
                        tag: 'video',
                        type: 'video/webm',
                        ext: '.mp4',
                        gUM: {video: true, audio: true},
                        mimetypes : {mimeType: 'video/webm'},
                    },
                    audio: {
                        tag: 'audio',
                        type: 'audio/mp3',
                        ext: '.mp3',
                        gUM: {audio: true},
                        mimetypes : {mimeType: 'video/webm'},
                    }
                };

            media = mediaOptions.video;

            recorder = new MediaRecorder(window.webrtc.webrtc.peers[0].stream,media.mimetypes);

            recorder.ondataavailable = e => {
                chunks.push(e.data);
                makeLink();
            };
            log('got media successfully');
            chunks=[];
            recorder.start();

        }

        function makeLink(){
            let blob = new Blob(chunks, {type: media.type })
                , url = URL.createObjectURL(blob)
                , li = document.createElement('li')
                , hf = document.createElement('a');
            hf.href = url;
            hf.download = `${counter++}${media.ext}`;
            hf.innerHTML = `donwload ${hf.download}`;
            li.appendChild(hf);
            ul.appendChild(li);
        }

        stop.onclick = e => {
            recorder.stop();
        }

mat-select multiple设置一个数组Angular4中的选中选项

1 个答案: