Mat-option 出现在页面底部，而不是出现在 mat-select 下

Question

我想创建一个下拉菜单，一切正常，但我的“mat-option”出现在页面末尾，我不知道为什么。请解释我做错了什么？

<mat-form-field appearance="fill">
    
          <mat-select [(ngModel)]="this.selectedValue" name="food">
            <mat-option *ngFor="let food of foods" [value]="food.value">
              {{food.viewValue}}
            </mat-option>
          </mat-select>
    
        </mat-form-field>

我的CSS：

mat-form-field {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.125;
  font-family: Roboto,Helvetica Neue,sans-serif;
  letter-spacing: normal;
  border: 2px solid silver;
  border-radius: 10px;
  height: 40px;
  width: 100%;
  position: relative;
  top: 50px;
}



mat-select {
  display: inline-table;
  cursor: pointer;
  position: inherit;
  position: relative;
  top: 0;
  left: 0;
  border-radius: 5px;
  box-sizing: border-box;
}

mat-option {
  font-size: inherit;
  font-weight: 400;
  font-family: Roboto,Helvetica Neue,sans-serif;
  border: 2px solid silver;
  border-radius: 10px;
  height: 40px;
  position: relative;
  top: 0;
  left: 0;
  width: 92%;
}

我有什么：

我希望这样：

Answer 1

@DocziSlizard，谢谢！我添加了 import "~@angular/material/prebuilt-themes/indigo-pink.css";到我的 style.css，它解决了我的问题！

#!/bin/bash
#
# Script to set up a second redmine instance running on the same server
# Note:
#   This script has been tweaked for general application and may contain errors
# Helpful References:
#   https://www.redmine.org/projects/redmine/wiki/RedmineInstall
#   https://www.phusionpassenger.com/library/config/apache/intro.html
# For rvm 1.29.10, redmine 4.1.1, passenger 5.3, apache 2.4.29
 
# Add user for new redmine to run as
sudo adduser --debug --shell /bin/bash --gecos 'redmine user 2' redmine_usr_2
sudo usermod -a -G rvm redmine_usr_2
# pw: <redmine-2-pw>
 
# Add database for second redmine to mysql
mysql -u <mysql-maint-acct> -p<mysql-maint-pw>
mysql> create database redmine_two character set utf8mb4;
mysql> create user 'redmine_usr_2'@'localhost' identified by '<redmine-2-pw';
mysql> grant all privileges on redmine_two.* to 'redmine_usr_2'@'localhost';
mysql> quit;
 
# Create the directory for the second instance redmine program
# Can't use the existing production version because some things,
# such as logs and uploaded files, also reside there
# The file .ruby-version contains "4.1.1" and prevents rvm from
# spewing messages about incompatible ruby version.
sudo -i -u redmine_usr_2
ln -s /opt/redmine/redmine-4.1.1.tar.gz
tar xf redmine-4.1.1.tar.gz
ln -s redmine-4.1.1 redmine_2
cd redmine_2
cp -p /opt/redmine/redmine/.ruby-version .

# Step 3 Database connection configuration
# Database connection is set up for a ruby environment named "redmine_2_env"
cd ~/redmine_2/config
sed -e "/^production:/,/encoding:/ s/database: redmine/database: redmine_two/" -e "/^production:/,/encoding:/ s/username: root/usern
ame: redmine_usr_2/" -e "/^production:/,/encoding:/ s/password: \"\"/password: \"<redmine-2-pw>\"/" -e "/^production:/ s/production/
redmine_2_env/" -e "/^development:/,/encoding:/ s/^/#/" -e "/^test:/,/encoding:/ s/^/#/" database.yml.example >database.yml_new
cp -p database.yml_new database.yml

# Environment configuration
cd ~/redmine_2/config/environments
cp -p production.rb redmine_2_env.rb

# Step 4 Dependencies installation
cd ~/redmine_2
bundle install
# Note that this may install some new (updated) gems

# Step 5 Session store secret generation
cd ~/redmine_2
bundle exec rake generate_secret_token

# Step 6 Database schema objects migration
cd ~/redmine_2
RAILS_ENV=redmine_2_env bundle exec rake db:migrate

# Step 7 Database default data set
cd ~/redmine_2
RAILS_ENV=redmine_2_env REDMINE_LANG=en bundle exec rake redmine:load_default_data

# Step 8 File system permissions
cd ~/redmine_2
# Note that on install the directories below actually already existed
# but doing the mkdir on an existing directory will be fine.
mkdir -p tmp tmp/pdf public/plugin_assets

## Step 9 Test the installation
## Use lynx because I don't have a local web browser.
# Note!!! This part of the script must be tested by hand, so is commented out
#cd ~/redmine_2
#bundle exec rails server webrick -e redmine_2_env &
## sudo aptitude install lynx
#lynx http://localhost:3000/
## This shows the redmine startup page

# Install plugins
cd ~/redmine_2
git clone -b stable https://github.com/AlphaNodes/additionals.git plugins/additionals
bundle exec rake redmine:plugins:migrate RAILS_ENV=redmine_2_env
exit

# Add new url to apache
# This includes the options necessary to configure PhusionPassenger
#   See: https://www.phusionpassenger.com/library/config/apache/reference/
# 
# /var/www/html
sudo ln -s /home/redmine_usr_2/redmine_2/public /var/www/html/redmine-site-2-url

# /etc/apache2/mods-available/passenger.conf specifies these global parameters:
#   PassengerRoot /opt/passenger/passenger-stable-5.3
#   PassengerDefaultRuby /usr/local/rvm/gems/ruby-2.6.6/wrappers/ruby
#   PassengerUserSwitching on
#   PassengerUser <passenger-default-ruby-user>
#   PassengerGroup <passenger-default-ruby-group>
#   PassengerFriendlyErrorPages on
# /etc/apache2/rubies/redmine-site-1.include specifies app-specific parameters for redmine site-1:
#        <directory  /var/www/html/redmine-site-1-url>
#            RailsBaseURI /redmine-site-1-url
#            PassengerAppRoot /opt/redmine/redmine
#            PassengerAppEnv production
#            PassengerAppGroupName production
#        </Directory>
# /etc/apache2/rubies/redmine-site-2.include app-specific parameters for redmine site-2:
#        <Directory /var/www/html/redmine-site-2-url>
#            PassengerAppRoot /home/redmine_usr_2/redmine_2
#            PassengerAppEnv redmine_2_env
#            PassengerAppGroupName redmine_2
#            RailsBaseURI /redmine-site-2-url
#            PassengerUser redmine_usr_2
#            PassengerGroup redmine_usr_2
#            PassengerFriendlyErrorPages on
#        </Directory>
#   
cd /etc/apache2/rubies
# Edit redmine-site-1.include to be consistent with the above redmine-site-1 contents
# Create redmine-site-2.include to be consistent with the above redmine-site-2 contents
sudo cp -p redmine-site-1.include redmine-site-1.include_org
sudo sh -c 'sed -e "/URI \/issues/ a\ \ \ \ \ \ \ \ \ \ \ \ PassengerAppRoot /opt/redmine/redmine\n            PassengerAppEnv produ
ction\n            PassengerAppGroupName production" redmine-site-1.include_org >redmine-site-1.include_new'
sudo cp -p redmine-site-1.include_new redmine-site-1.include
sudo sh -c 'cat - <<EOF > /etc/apache2/rubies/redmine-site-2.include
# /etc/apache2/rubies/redmine-site-2.include
        <Directory /var/www/html/redmine-site-2-url>
            PassengerAppRoot /home/redmine_usr_2/redmine_2
            PassengerAppEnv redmine_2_env
            PassengerAppGroupName redmine_2
            RailsBaseURI /redmine-site-2-url
            PassengerUser redmine_usr_2
            PassengerGroup redmine_usr_2
            PassengerFriendlyErrorPages on
        </Directory>
EOF'
# tweak the existing apache redmine site.conf to include
# the /etc/apache2/rubies include file for the new site
cd /etc/apache2/sites-available
sudo cp -p redmine-sites.conf redmine-sites.conf_org
sudo sh -c 'sed -e "/redmine-site-1.include/ a\ \ \ \ Include rubies/redmine-site-2.include" redmine-sites.conf_org >redmine-sites.c
onf_new'
sudo cp -p redmine-sites.conf_new redmine-sites.conf
sudo cp -p redmine-sites-le-ssl.conf redmine-sites-le-ssl.conf_org
sudo sh -c 'sed -e "/redmine-site-1.include/ a\ \ \ \ Include rubies/redmine-site-2.include" redmine-sites-le-ssl.conf_org >redmine-
sites-le-ssl.conf_new'
sudo cp -p redmine-sites-le-ssl.conf_new redmine-sites-le-ssl.conf
sudo apache2ctl restart